gpt4 book ai didi

javascript - Jquery 和 Bootstrap 模态

转载 作者:行者123 更新时间:2023-11-27 23:00:23 25 4
gpt4 key购买 nike

我正在努力让它发挥作用。我认为我与库的链接有问题。

您可以在这里找到一个 fiddle 示例:http://jsfiddle.net/pL2w37qb/

我想从 fiddle 中汲取它并使其成为现实。这是我的代码,我想我只是错误地链接到 Bootstrap 库,并且我的 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">&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>

最佳答案

首先包括您的jquery.min.js之前bootstrap.jsbootstrap使用 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">&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>

关于javascript - Jquery 和 Bootstrap 模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37176841/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com