CODEWITHSUNDEEP
javascriptjqueryhtml
Y.Bohui
Y.Bohui

Reputation: 57

Create dynamic modal but it doesn't work

Hi I'm trying to trigger the modal but it doesn't work at all, I've got my button and I used jquery to create a dynamic modal its not work if anyone have a idea.

	
  
  $("#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>

Upvotes: 2

Views: 433

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Working fiddle.

You don't need to attach any event, all what you want is appending the modal to the sectionModal div like :

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

Hope this helps.

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>

Upvotes: 1

Related Questions