jquery - 如何使用轮播关闭 X 上的 Bootstrap 4 弹出窗口
问题描述
当有人单击 X 图标时,我试图关闭 Bootstrap 4 弹出窗口。
如果我删除代码 'data-backdrop="static" 它会在我单击模式外的任何位置时关闭弹出窗口。但是,这不会起作用,因为每次有人尝试单击轮播的下一个图标时,它都会自动关闭弹出窗口。我只想在有人仅单击 X 图标时关闭弹出窗口。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade in" role="dialog" data-backdrop="static">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="myModal">×</button>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../images/placeimg_550_250_grayscale_any.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/550/250/any" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>
解决方案
您应该链接到正确的CSS 和 JavaScript 文件;对于 Bootstrap 4(撰写本文时的当前版本是 4.3.1):
CSS:https ://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
JavaScript:https ://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
关闭按钮的属性值data-dismiss
也应该设置为modal
:
<button type="button" class="close" data-dismiss="modal">×</button>
关闭按钮和轮播也应该放在里面.modal-content
——你可以使用自定义 CSS 使模式透明。
工作示例
/* Automatically open the modal */
$('#myModal').modal('show');
/* Make the modal be transparent */
#myModal .modal-content {
background-color: transparent;
border: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<!-- Button to close the modal -->
<div><button type="button" class="close" data-dismiss="modal">×</button></div>
<!-- Carousel -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placeimg.com/550/250/nature" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/550/250/any" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
推荐阅读
- scala - 用于理解的产量会引发类型不匹配的编译器错误
- java - 无法更新我的地图
> - inno-setup - Inno Setup 使用 GDI+ 制作动画 GIF?
- javascript - 如何在 JavaScript 中模拟一个大尺寸的文件以进行测试?
- selenium - 你会选择 Selenium 而不是 Testbench (Vaadin) 吗?在开始新项目之前规划自动化工具
- google-cloud-platform - Google Cloud Composer:访问 StatsD 指标
- r - 从图像中删除具有单一颜色的元素
- javascript - 使用 switchmap 和 forkjoin 链接 observables 不能按预期工作 angular typescript rxjs
- javascript - 只有在状态更新后才反应“TypeError:imageCollection.map”不是一个函数
- javascript - 如果在一定时间后没有发送响应,则向用户发送超时响应