Jquery und Bootstrap Modal

Ich versuche, dies zur Arbeit zu bringen. Ich denke, ich habe ein Problem mit meiner Verbindung zu den Bibliotheken.Jquery und Bootstrap Modal

Sie können eine Fiddle Beispiel finden Sie hier: http://jsfiddle.net/pL2w37qb/

ich, dass von Geige nehmen wollen und es real zu machen. Hier ist mein Code wieder in Ich denke, ich bin nur falsch Link zu der Bootstrap-lib und möglicherweise auch ein Problem mit meinem Jquery-Anordnung. Ich bin sehr neu dazu!

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

Quelle

2016-05-12 Frank G.

Zunächst einmal sind Ihre jquery.min.js vor bootstrap.js als bootstrap Funktionen von jquery verwendet. Zweitens ist der von Ihnen angegebene CSS-Link falsch. Es sollte sein: <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

das unten stehende Snippet Siehe:

$('.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>

Quelle

2016-05-12 03:46:16

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

Ich glaube, Sie Jquery, bevor bootstrap.js

enthalten muss

Quelle

2016-05-12 03:46:35 theinarasu

Jquery und Bootstrap Modal

Antwort

Verwandte Themen