I have two button here that are being used to close the modal. The first is the close icon and the other one is cancel button, both use data-dismiss to close the modal. However, both of them are not working. I am using the same code for another modal and there they are working fine. Any guesses?
<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal">
<div class="modal-dialog">
<div id="timeSelectModalContent" class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<label>
<input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox">
<label class="checkbox-label">Thursday, 08:00 pm.</label>
</label>
<br>
<label>
<input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox">
<label class="checkbox-label">Thursday, 09:30 pm.</label>
</label>
<div id="time-modal-footer" class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button>
</div>
</div>
</div>
</div>
Very old topic but it still shows up first for people searching this problem, likely caused by them making the same simple mistake I did which was failing to ensure that the modal div was outside of the main body div from which it was launched. To use the Material Kit as an example, you should double check that the target "#myModal" div is outside the closing div tag for your main container.
<div class="main main-raised">
<div class="container">
<!-- modals -->
<div class="row" id="modals">
<div class="col-md-6">
<button class="btn btn-primary btn-raised btn-round" data-toggle="modal" data-target="#myModal">
Classic modal
</button>
</div>
</div>
<!-- end modals -->
</div>
</div>
<!-- Classic Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Hey hey</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-simple">Nice Button</button>
<button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
First check you have included bootstrap.js file in your html correctly.
You can try this code and replace the button tag for closing modal by -
<a href="#" class="close" data-dismiss="modal" aria-label="close">×</a>
If still doesn't work.. Let me know.!
You can add an on-click event on close button in jQuery. Like this-
$("#yourModal").modal("hide");
Here is my implementation of a modal you can use for comparing to help troubleshoot what errors exist in your modal code.
<html lang="en">
<head>
<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.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h2>click Here</h2>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
For me modal was not getting closed because script files had conflict somewere, so used minimum required script files to check the problem in closing model.Way I added scripts for which model was getting closed properly
"scripts": [
"src/assets/js/lib/jquery/jquery.min.js",
"src/assets/js/lib/bootstrap/js/popper.min.js",
"src/assets/js/lib/bootstrap/js/bootstrap.min.js"
]
And for sure I had added bootstrap.min.css in styles.
remove the "fade" class.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
change to
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
use this code close model
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h2>click on button</h2>
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
