标签：遮罩 index dialogModal 不全 editModal modal css

多个modal遮罩层覆盖不全的问题

如下有两个 modal的情况，要解决的是 在delete操作时弹出的modal 周围没有遮罩层环绕使得 确认 modal 辨识度不高 的问题
这里是修改好了的效果

csdn 解法：

这个解法不是很恰当，或者说比较坑，会一次性吧所有遮罩层取消，展示的效果也不好。

不高也提供了解决思路，一下是我总结的思路：

$(selected).css('z-index')
// "1060" /**或者是其他数值*/
$(selected).css('z-index'，'0') // 将当前 选中modal 遮罩层设为 0 以方便让其他 modal 产生遮罩效果
// 建议设为 0 这样 无论设备显示器大小如何变化，都能达到想要的目的
// 一个 与遮罩层相关的尺寸，在多个modal时，该css属性 最大的将会显示在该modal周围，其他modal不展示遮罩层
// 处理这个问题 只要把 这个尺寸大小 做相对调整，使得需要展示出来遮罩层的那个modal该尺寸 相对其他modal为最大即可
// 注意关闭 当前modal时要有恢复 z-index的操作，不然会导致遮罩层一直存在，无法进行页面操作的情况发生
/***
如果 所有遮罩层都不展示 可以 
使用： **/
$('.modal-backdrop').remove();// 去掉遮罩层即可

实际操作

 		// when delete show dialogModal
        $('#delBtn').bind("click",function() {
            $('#message').text('OK for Delete processing?');
            $('#dialogModal').modal('show');
            /* 尺寸调整 让遮罩环绕 dialogModal */
            $('#editModal').css('z-index','0');
            $('#dialogModal').css('z-index','1060');
        });

        // delete process and hide dialogModal
        $('#dialogOkBtn').click( function () {
            /** 删除操作 **/
            $('#dialogModal').modal('hide');
            /* 尺寸恢复 遮罩效果恢复环绕 editModal */
            $('#dialogModal').css('z-index','0');
            $('#editModal').css('z-index','1060');
        });

        // hide dialogModal
        $('#dialogCancelBtn').click( function () {
            $('#dialogModal').modal('hide');
            /* 尺寸恢复 遮罩效果恢复环绕 editModal */
            $('#dialogModal').css('z-index','0');
            $('#editModal').css('z-index','1060');
        });

标签：遮罩,index,dialogModal,不全,editModal,modal,css
来源： https://www.cnblogs.com/OwlInTheOaktree/p/16204096.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。