when I click on button to show modal,it’s shows for few seconds only and it gets automatically hide modal.
I am using this code:
HTML:
<button type="button" data-toggle="modal" data-target="#myModal1">Open Modal</button>
modal:
<div class="modal fade" id="myModal1" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title" style="color:#422774">Privious year</h4> </div> <div class="modal-body"> <p style="color:green">Welcome to school</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
At first you check your bootstrap css and js link
that is:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Add html:
<button type="button" data-toggle="modal" id="open_modal" data-target="#myModal"> Click Here </button>
Modal:
<div class="modal fade" id="myModal1" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title" style="color:#422774">Privious year</h4> </div> <div class="modal-body"> <p style="color:green">Welcome to school</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
Add jQuery function:
<script type="text/javascript"> $(document).ready(function(){ $("#open_modal").on('click', function(){ $('#myModal').modal('show'); //alert("ok"); }); }); </script>
Question and answer is powered by AnsPress.io