Try it
Javascript
Jquery
Angular
Learn Angular
Learn Javascript
Learn Bootstrap
Learn jQuery
Bootstrap Modal Using Jquery
modal is opened using juery i.e
data-target
attribute is not used to open modal.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Bootstrap Input Example</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <button type="button" class="btn btn-primary btn-lg" id="largeModalBtn">Open Large Modal</button> <button type="button" class="btn btn-primary btn-lg" id="mediumModalBtn">Open Medium Modal</button> <button type="button" class="btn btn-primary btn-lg" id="smallModalBtn">Open Small Modal</button> </div> <!-- Large Modal --> <div id="largeModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Header</h4> </div> <div class="modal-body"> <p>This is a example of large bootstrap modal opened with javascript. Thanks to visiting LearnKode.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="closeLargeModal">Close</button> </div> </div> </div> </div> <!-- Medium Modal --> <div id="mediumModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-md"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Header</h4> </div> <div class="modal-body"> <p>This is a example of medium bootstrap modal opened with javascript.Thanks to visiting LearnKode.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="closeMediumModal">Close</button> </div> </div> </div> </div> <!-- Small Modal --> <div id="smallModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Header</h4> </div> <div class="modal-body"> <p>This is a example of small bootstrap<br /> modal opened with javascript.<br /> Thanks to visiting LearnKode.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="closeSmallModal">Close</button> </div> </div> </div> </div> </body> </html> <script type="text/javascript"> $(function () { //Open And Close Large Modal With Javascript $("#largeModalBtn").click(function () { $("#largeModal").modal('show'); }); $("#closeLargeModal").click(function () { $("#largeModal").modal('hide'); }); //Open And Close Medium Modal With Javascript $("#mediumModalBtn").click(function () { $("#mediumModal").modal('show'); }); $("#closeMediumModal").click(function () { $("#mediumModal").modal('hide'); }); //Open And Close Small Modal With Javascript $("#smallModalBtn").click(function () { $("#smallModal").modal('show'); }); $("#closeSmallModal").click(function () { $("#smallModal").modal('hide'); }); }); </script>
Output
×
Save This try
Title
Description
<p>modal is opened using juery i.e <code>data-target</code> attribute is not used to open modal.</p>
