Question

<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上没有！

任何帮助？

Answer 1

可能的解决方案可以考虑CSS pointer-event属性。

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

open( event, ui )
close( event, ui )（删除新添加的样式的代码）

＆＃13;

$('.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');
});

＆＃13;

<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>

＆＃13;

Answer 2

尝试使用stopPropagation方法：

$('#container, #cpanel').on("click", function(event){
    if ($('.modal').is(':visible')) {
       event.stopPropagation()
    }
});

https://codepen.io/anon/pen/zjywXV

如果模态可见，则阻止任何单击

2 个答案: