javascript - 创建动态模式但它不起作用

Question

您好，我正在尝试触发模态，但它根本不起作用， 我有我的按钮，我使用 jquery 创建了一个动态模式，如果有人有想法，它是行不通的。

	
  
  $("#myModal").click(function() {
		 
		
		var MysModel = ' <div class="modal fade" id="myModal" role="dialog">\
	<div id="page-dialog" class="modal-dialog">\
\
		<!-- Modal content-->\
		<div class="modal-content">\
			<div class="modal-header">\
				<button type="button" class="close" data-dismiss="modal">&times;</button>\
				<h3 class="title-modal">tyu</h3>\
			</div>\
			\
			<div id="page-content" class="modal-body">\
				<p>ghuihuighgoghggog</p>\
			</div>\
			<div class="modal-footer">\
				<button type="button" class="btn" data-dismiss="modal">Close</button>\
			</div>\
		</div>\
\
	</div>\
</div>'

<button class="addweb" data-toggle="modal" data-target="#myModal">Add Website</button>


<div id="sectionModal"></div>

Answer 1

Working fiddle .

您不需要附加任何事件，您想要的只是将模态附加到 sectionModal div，例如:

$('#sectionModal').append(MysModel);

希望这对您有所帮助。

var MysModel = ' <div class="modal fade" id="myModal" role="dialog">\
	<div id="page-dialog" class="modal-dialog">\
		<!-- Modal content-->\
		<div class="modal-content">\
			<div class="modal-header">\
				<button type="button" class="close" data-dismiss="modal">&times;</button>\
				<h3 class="title-modal">tyu</h3>\
			</div>\
			\
			<div id="page-content" class="modal-body">\
				<p>ghuihuighgoghggog</p>\
			</div>\
			<div class="modal-footer">\
				<button type="button" class="btn" data-dismiss="modal">Close</button>\
			</div>\
		</div>\
	</div>\
</div>';

$('#sectionModal').append(MysModel);

$('#open-modal').on('click', function(){
    $('#myModal').modal();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button class="addweb" data-toggle="modal" data-target="#myModal">Add Website</button>

<button type="button" id="open-modal">Open Modal</button>

<div id="sectionModal"></div>