Menu
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?
566
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.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
