时间戳

首页 > 解决方案 > 如果模态可见，则阻止任何点击

javascript - 如果模态可见，则阻止任何点击

问题描述

<body>
<div id='container'>
<div id='cpanel' style="position:fixed;">525</div>
</div>
<div class='modal' style="position:fixed;>323</div>
</body>

如果可见，我想阻止任何点击container及其子项。modal

js

$('#container, #cpanel').click(function(){
    if ($('.modal').is(':visible')) {return false;}
});

点击container被阻止，但cpanel不是！

有什么帮助吗？

标签： javascriptjquery

解决方案

一个可能的解决方案可以考虑 CSS指针事件属性。

如果您使用的是 jquery ui 对话框，则可以将代码添加到事件中：

$('.modal').dialog({
    open: function( event, ui ) {
        $('#cpanel').css('pointer-events','none');
    },
    close: function( event, ui ) {
        $('#cpanel').css('pointer-events','auto');
    },
});

$('#container, #cpanel').click(function(e){
    e.stopPropagation();
    console.log('--->clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id='container'>
    <div id='cpanel' style="position:fixed;">525</div>
</div>
<div class='modal' style="position:fixed;">323</div>

推荐阅读