Question

我有一个类似

的HTML

<button id="reporting"></button>
<ul class="showHideChkBox">
    <li><label><input name="rptHeaders" type="checkbox"><span>Name</span></label></li>
    <li><label><input name="rptHeaders" type="checkbox"><span>Client ID</span></label></li>
    <li><label><input name="rptHeaders" type="checkbox"><span>Document Name</span></label></li>
</ul>

点击按钮，我弹出名为showHideChkBox的Ul类。同时我将叠加层附加到ul

$('<div class="divOpcty"></div>').insertBefore('.showHideChkBox');

CSS

.divOpcty {
    bottom: 0;
    right: 0;
    opacity: .1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    z-index: 1100;
}

叠加层正在运行，但是当点击窗口上的任何位置时我无法移除此叠加层，除非点击ul li复选框。

我试过

$('html').on("click", rptRemoveOverlay);
function rptRemoveOverlay() {
    if (RPT_Action == 1) {
        RPT_Action = 2;
    } else {
        $(".divOpcty").fadeOut('slow', function () {
            $(this).remove();
            $('.showHideChkBox').fadeToggle(1000);
        });
        RPT_Action = 1;
    }
}

但是点击复选框时showHideChkBox也隐藏了。

我需要的是点击ul li chceckbox列表显示的按钮，并且还显示叠加。当点击任何外侧Ul时，ul将隐藏，并且叠加将隐藏。

提前致谢

如何隐藏叠加在课堂外点击

0 个答案: