[英]Close/Open Bootstrap Modal outside modal box?
我正在尝试打开/关闭不同的模态框,而不必按下模态框内的“关闭”按钮。 我还没有找到任何解决方案。 我在这里有什么选择? 可以做到吗?
感谢 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 -->
可以使用 javascript 来完成,这里是我从文档 源获得的答案
此代码使用 js 显示模态:
$('#exampleModal').modal('show')
此代码使用 javascript 隐藏模态:
$('#myModal').modal('hide')
当然,如果您使用引导程序,您已经可以访问 jquery。
您可以使用以编程方式切换模式
$('#exampleModal').modal('toggle')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.