Jquery 我想将溢出隐藏与div函数外部的单击进行集成

每当我将可见溢出添加到事件目标时，隐藏和可见溢出将不会在其他覆盖上工作。有两个重叠弹出窗口，代码工作正常，直到我将任何溢出信息添加到事件目标。我想隐藏溢出体时，点击覆盖弹出窗口，并有它重新出现时，你点击外面的覆盖或关闭按钮。而且，我所有的div都处于相对位置

JQUERY

$(document).ready(function()
{

    $MainHeadline = $("#MainHeadline, #mainHeadlineLink");
    $MainHeadlineClose = $(".closeMain");
    $SideHeadline = $("#SideHeadlineOne, #SideOneLink");
    $SideHeadlineClose = $(".closeSideMain");

    $MainHeadline.click(function(event)
    {
        event.preventDefault();
        $('html, body').css('overflowY', 'hidden');
        $(".MainHeadlineOverlay").fadeToggle("fast");
    });

    $MainHeadlineClose.click(function(event)
    {
        $('html, body').css('overflowY', 'visible'); 
        $(".MainHeadlineOverlay").fadeToggle("fast");
    });

    $SideHeadline.click(function(event)
    {
        event.preventDefault();
        $('html, body').css('overflowY', 'hidden'); 
        $(".RightHeadlineOverlayOne").fadeToggle("fast");
    });

    $SideHeadlineClose.click(function(event)
    {
        $('html, body').css('overflowY', 'visible'); 
        $(".RightHeadlineOverlayOne").fadeToggle("fast");
    });

    $(this).click(function(event) 
    {
        if (!$(event.target).closest('.MainHeadlineOverlay-wrapper, #MainHeadline').length)
        {
            $(".MainHeadlineOverlay").hide();
        }
    });

    $(this).click(function(event) 
    {
        if (!$(event.target).closest('.RightHeadlineOverlayOne-wrapper, #SideHeadlineOne').length)
        {
            $(".RightHeadlineOverlayOne").hide();
        }
    });

});

HTML

按作者日期

借

按作者日期

按作者日期

---

链接：

首先：没有CSS属性

overflowY

$('html, body').css('overflowY', 'hidden');

但是，有一些CSS属性名为

overflow-y

，

overflow-x

和简单的

overflow

。在这种情况下，没有理由不使用简化的

溢出

属性

$('html, body').css('overflow', 'hidden');

---

Second:当用户在模式外单击时，必须再次设置

溢出：可见

$(this).click(function (event) {
    if (!$(event.target).closest('.MainHeadlineOverlay-wrapper, #MainHeadline').length) {
        $('html, body').css('overflow', 'visible');
        $(".MainHeadlineOverlay").hide();
    }
});

$(this).click(function (event) {
    if (!$(event.target).closest('.RightHeadlineOverlayOne-wrapper, #SideHeadlineOne').length) {
        $('html, body').css('overflowY', 'visible');
        $(".RightHeadlineOverlayOne").hide();
    }
}); 

有更好的方法可以做到这一点，但这超出了问题的范围


第三：元素要有溢出，首先必须有一个设置的高度。只需将高度设置为100%，即可使
溢出：隐藏
按您的要求运行

html, body {
    height: 100%;
}


html, body {
    height: 100%;
}