Twitter Bootstrap Question posted in

Jquery and Bootstrap Modal – Twitter bootstrap

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    <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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search