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


使用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); }); });


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM