Geek Answers Handbook

Bootstrap modal data not working

So, it data-dismiss="modal"does not work for buttons added to my HTML, but it works for buttons that are added to the modal via JS by inserting an HTML button. This makes me realize that something is wrong with where / in what order I add my script tags.

My script tags are in the following 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 to put them in <head>. I moved them to be the last before </body>. I moved them right before and right after the modal html.

UPDATE

Here is 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">&times;</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 a close button and X, through JS, it also works. He has it already in modal, which causes problems.

Any suggestions?

+4
2

. JS event.stopPropagation(); , , , , , Bootstrap.

, , Bootstrap JS, , , / .

UPDATE

, event.stopPropagation() .

+1

div 'modal-content':

<div class="modal-header">...</div>
<div class="modal-body">
  ...
  your content
  ...
</div>
<div class="modal-footer">
  ... 
  your buttons
  ...
</div>
0

More articles:


All Articles