Bootstrap modal data dismiss not working
Question
So, the the data-dismiss="modal" is not working for buttons that are added in my HTML, but is working for buttons that are added to the modal via JS inserting the button HTML. This makes me figure that there's something wrong with where/what order I am adding my scripting tags.
My scripting tags are in this order:
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
I tried putting them in the <head> . I moved them to be the last thing right before </body> . I moved them to be right before and right after the modal html.
UPDATE
Here's a simplified version of my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site-bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div id="Popup" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div id="PopupHeader">
<button type="button" id="PopupX" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="PopupTitle" class="modal-title floatLeft"></h4>
<div class="clear"></div>
</div>
<div class="modal-body bgColorWhite">
<div id="PopupContent">Test</div>
</div>
<div id="PopupButtons" class="modal-footer bgColorWhite">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/Shared/site.js"></script>
</body>
</html>
Another note:
If I add the "Close" button, aka the X, via JS, it works as well. It's having it already in the modal that causes issues.
Any suggestions?
2 answers
solution1
1 2014-11-14 04:35:00
I was able to figure out my issue. It was that in my own JS file, I wanted to add into every button click event, event.stopPropagation(); Since this was a method, and I did not want this added multiple times to the same button every time it was called, I would remove the previous click events, which was removing Bootstrap's dismiss click event.
So, if you have this same issue and you have all of Bootstrap's JS added correctly, check your own code to make sure you're not overwriting/removing events.
UPDATE
Just to clarify, event.stopPropagation() prevents data-dismiss from working.
solution2
0 2014-11-14 00:24:21
Try put into 'modal-content' div:
<div class="modal-header">...</div>
<div class="modal-body">
...
your content
...
</div>
<div class="modal-footer">
...
your buttons
...
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.