Home/ Questions/Q 8364649
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T12:28:29+00:00

I tried to create modal window using Twitter Bootstrap with the following code <link

  • 0

I tried to create modal window using Twitter Bootstrap with the following code

<link rel= "stylesheet" href = "/static/bootstrap/css/bootstrap.css" >
<script src ="/static/bootstrap/js/bootstrap-modal.js" ></script>
<script type = "text/javascript" src= "/static/bootstrap/js/bootstrap.js" ></script>
<script src="/static/js/jquery.js></script>
<div class="modal hide" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close </a>
        <a href="#" class="btn btn-primary"> Save changes </a>
    </div>
</div>
<a class="btn" data-toggle="modal" href="#myModal"> Launch Modal </a>

But it still only shows one button. I click on the link and nothing happens, the modal window does not pop up. Please help me find out what I’m doing wrong?
P.S I just started learning it now. If you could please tell me where is my error is that would be great.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re loading your bootstrap.js after bootstrap-modal.js.

    As well, It’s better to move them to the very end of <body>.

    <html> 

    <head>
        <link href="bootstrap.css" rel="stylesheet"> 
    </head>

    <body>

        <div class="container">

        <div id="example" class="modal hide fade in" style="display: none; ">

            <div class="modal-header">
                <a class="close" data-dismiss="modal">?</a>
                <h3>This is a Modal Heading</h3>
            </div>

            <div class="modal-body">
                <h4>Text in a modal</h4>
                <p>You can add some text here.</p>              
            </div>

            <div class="modal-footer">
                <a href="#" class="btn btn-success">Call to action</a>
                <a href="#" class="btn" data-dismiss="modal">Close</a>
            </div>

        </div>

        <a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Open modal</a>

        <script src="jquery.js"></script>
        <script src="bootstrap-modal.js"></script>

    </body>

</html>
    • 0