我正在尝试打开/关闭不同的模态框,而不必按模态框内的“关闭”按钮。我还没有找到任何解决方案。我在这里有哪些选择?可以吗?
谢谢 AS9
这是我的代码: https://codepen.io/pabs-scl/pen/eYBRqEo
<section class="container my-5">
<div class="row">
<div class="col-6">
<p>Col-6</p>
<!-- button 1 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-backdrop="static" data-keyboard="false">
Modal 1
</button>
<!-- button 2 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalTwo">
Modal 2
</button>
</div>
<div class="col-6 holder">
<p>Col-6</p>
<!-- Modal 1 -->
<div class="modal " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<h5 class="modal-title" id="exampleModalLabel">Modal one</h5>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal " id="exampleModalTwo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelTwo" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<h5 class="modal-title" id="exampleModalLabelTwo">Modal two</h5>
</div>
</div>
</div>
</div> <!-- col-6 -->
</div> <!-- row -->
</section> <!-- container -->
答案 0 :(得分:0)
可以使用 javascript 来完成,这里是我来自 doc source
的回答此代码使用js显示模态:
$('#exampleModal').modal('show')
此代码使用 javascript 隐藏模态:
$('#myModal').modal('hide')
当然,如果您使用的是引导程序,那么您已经可以访问 jquery。
答案 1 :(得分:0)
您可以使用
以编程方式切换模式$('#exampleModal').modal('toggle')