BootStrap同时显示多个Modal解决方案

最新推荐文章于 2022-03-17 19:09:42 发布

weixin_30737433

最新推荐文章于 2022-03-17 19:09:42 发布

阅读量493

点赞数

原文链接：http://www.cnblogs.com/shiyh/p/7240587.html

版权

使用BootStrap自带的Modal的时候，如果同时调用多个Modal，那么只能看到背景颜色加深但是看不见新的Modal页面。

问题主要是Modal的z-index有问题，重新计算z-index并赋值即可。在Modal完全加载之后调用方法：

$(document).ready(function() { // 通过该方法来为每次弹出的模态框设置最新的zIndex值，从而使最新的modal显示在最前面 $(document).on('show.bs.modal', '.modal', function() { var zIndex = 1040 + (10 * $('.modal:visible').length); $(this).css('z-index', zIndex); setTimeout(function() { $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); }, 0); }); });