Jquery 和 Bootstrap 模态
[英]Jquery and Bootstrap Modal
问题描述
我正在努力让它发挥作用。 我想我与图书馆的链接有问题。
你可以在这里找到一个小提琴示例： http : //jsfiddle.net/pL2w37qb/
我想从小提琴中提取它并使其成为现实。 这是我的代码，我想我只是错误地链接到引导程序库，并且我的 jquery 安排也可能有问题。 我对此很陌生！
<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">×</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">×</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">×</button> <a href="#" class="next">next</a>
</div>
<div class="modal-body">Modal 3</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
1 2016-05-12 03:46:16
首先，在bootstrap.js之前包含您的jquery.min.js ，因为bootstrap使用来自jquery功能。 其次，您提供的 CSS 链接是错误的。 它应该是： <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
请参阅以下代码段：
$('.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">×</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">×</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">×</button> <a href="#" class="next">next</a> </div> <div class="modal-body">Modal 3</div> </div> </body>
解决方案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>
我认为你必须在 bootstrap.js 之前先包含 jquery
带有引导模态的jQuery textFill
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.