CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3
Frank G.
Frank G.

Reputation: 1579

Jquery and Bootstrap Modal

I am trying to get this to work. I think I have a problem with my linking to the libraries.

You can find a Fiddle Example here: http://jsfiddle.net/pL2w37qb/

I want to take that from fiddle and make it real. Here is my code in again I think I am just link incorrectly to the bootstrap lib and might also have an issue with my jquery arrangement. I am very new to this!

    <title>Test</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.csshttp://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
        $('.prev').click(function () {
            $(this).closest('.modal').modal('hide').prev('.modal').modal('show');
        });
        $('.next').click(function () {
            $(this).closest('.modal').modal('hide').next('.modal').modal('show');
        });
    </script>
    </head>

    <body>

    <a href="#modal1" data-toggle="modal">Open modal</a>

    <div id="modal1" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-header"> <a href="#" class="prev">prev</a>

            <button type="button" data-dismiss="modal" aria-hidden="true">&times;</button> <a href="#" class="next">next</a>

        </div>
        <div class="modal-body">Modal 1</div>
    </div>

    <div id="modal2" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-header"> <a href="#" class="prev">prev</a>

            <button type="button" data-dismiss="modal" aria-hidden="true">&times;</button> <a href="#" class="next">next</a>

        </div>
        <div class="modal-body">Modal 2</div>
    </div>

    <div id="modal3" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-header"> <a href="#" class="prev">prev</a>

            <button type="button" data-dismiss="modal" aria-hidden="true">&times;</button> <a href="#" class="next">next</a>

        </div>
        <div class="modal-body">Modal 3</div>
    </div>        

    </body>
    </html>

Upvotes: 1

Views: 614

Answers (2)

user1937699
user1937699

Reputation: 

<title>Test</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.csshttp://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    *<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>*
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>

i think you must include jquery first before bootstrap.js

Upvotes: 0

Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

First of all include your jquery.min.js before bootstrap.js as bootstrap uses features from jquery. Secondly the CSS link you provided is wrong. It should be : <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

See the below snippet:

 $('.prev').click(function () {
            $(this).closest('.modal').modal('hide').prev('.modal').modal('show');
        });
        $('.next').click(function () {
            $(this).closest('.modal').modal('hide').next('.modal').modal('show');
        });
<title>Test</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>


    <body>

    <a href="#modal1" data-toggle="modal">Open modal</a>

    <div id="modal1" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-header"> <a href="#" class="prev">prev</a>

            <button type="button" data-dismiss="modal" aria-hidden="true">&times;</button> <a href="#" class="next">next</a>

        </div>
        <div class="modal-body">Modal 1</div>
    </div>

    <div id="modal2" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-header"> <a href="#" class="prev">prev</a>

            <button type="button" data-dismiss="modal" aria-hidden="true">&times;</button> <a href="#" class="next">next</a>

        </div>
        <div class="modal-body">Modal 2</div>
    </div>

    <div id="modal3" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-header"> <a href="#" class="prev">prev</a>

            <button type="button" data-dismiss="modal" aria-hidden="true">&times;</button> <a href="#" class="next">next</a>

        </div>
        <div class="modal-body">Modal 3</div>
    </div>        

    </body>

Upvotes: 1

Related Questions