CODEWITHSUNDEEP
javascripttwitter-bootstrap
skeeph
skeeph

Reputation: 490

How can I create modal window using Bootstrap?

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.

Upvotes: 0

Views: 3352

Answers (1)

Edward Ruchevits
Edward Ruchevits

Reputation: 6696

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>

Upvotes: 2

Related Questions