每当我向事件目标添加可见溢出时,隐藏和可见的溢出将无法在其他叠加层上起作用。有两个叠加弹出窗口,代码工作正常,直到我向事件目标添加任何溢出信息。我想在单击叠加弹出窗口时隐藏身体上的溢出,并在单击叠加层外部或关闭按钮时重新显示。此外,我所有的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
<body>
<div class="Headlines">
<div class="mainheadline">
<div class="headline">
<a href="" id="MainHeadline"><img src="picture.jpg" width="100%" height="100%"></a>
<div class="HeadlineTitle">
<h1><a href="" id="mainHeadlineLink">Title</a></h1>
<p> by Author Date <a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
</div>
</div>
<div class="sideheadline">
<div class="sideheadlineOne">
<div class="imageheadlineOne">
<a href="" id="SideHeadlineOne"><img src="picture.jpg" height="100%;" width="100%"/></a>
<div class="sideHeadingOne">
<h1><a href="" id="SideOneLink">Title</a></h1>
<p> by <a href="">Author Date</a><a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
</div>
</div>
</div>
<div class="sideheadlineTwo">
<div class="imageheadlineTwo">
<a href="" id="SideHeadlineTwo"><img src="picture.jpg" height="100%;" width="100%"/></a>
<div class="sideHeadingTwo">
<h2><a href="" id="SideTwoLink">Title</a></h2>
<p> by Author Date <a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
</div>
</div>
<div class="imageheadlineThree">
<a href="" id="SideHeadlineThree"><img src="picture.jpg" height="100%;" width="100%;"/></a>
<div class="sideHeadingThree">
<h2><a href="" id="SideThreeLink">Title</a></h2>
<p> by Author Date <a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分:2)
首先:没有CSS属性overflowY
。
$('html, body').css('overflowY', 'hidden');
但是,有一些名为overflow-y
,overflow-x
和overflow
的CSS属性。在这种情况下,没有理由不使用简化的overflow
属性。
$('html, body').css('overflow', 'hidden');
第二:当用户点击模式外时,您必须再次设置overflow: visible
。
$(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%,overflow: hidden
就可以按照您的意愿运行。
html, body {
height: 100%;
}