我正在创建一个不使用jquery插件的灯箱,现在我试图通过点击close
按钮或点击白色区域外的任何其他位置来关闭它(.white_content
)
的 Jsfiddle Example
<button onclick="document.getElementById('lightbox').style.display='inline';">
Show lightbox
</button>
<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
<div class="white_content">
<a href="javascript:void(0)" onclick="document.getElementById('lightbox').style.display='none';" class="textright">Close</a>
<p>Click anywhere to close the lightbox.</p>
<p>Use Javascript to insert anything here.</p>
</div>
</div>
<!-- LIGHTBOX CODE END -->
虽然这不仅仅是我想要它。我希望它只在我点击灯箱的暗区而不是在白色容器(.white_content
)上时关闭,我听说过event.propagation可能是一件坏事,所以这就是我的方式关闭灯箱
$(document).on('click', function(event) {
if (!$(event.target).closest('button').length) {
$(".lightbox").hide();
}
});
答案 0 :(得分:3)
你可以改变你的状况,如下所示
$(document).on('click', function(event) {
if ($(event.target).has('.white_content').length) {
$(".lightbox").hide();
}
});
答案 1 :(得分:1)
大多数灯箱脚本都使用两个div-s,内容和叠加层。叠加是为了背景并阻止用户点击页面内容,并且还可以点击叠加来关闭灯箱。
HTML:
<div id="lightbox"> LIGHTBOX CONTENT </div>
<div id="overlay"></div>
JS:
$( '#overlay, #close').on('click', function(event) {
$("#lightbox, #overlay").hide();
});
$( '#show').on('click', function(event) {
$("#lightbox, #overlay").show();
});
答案 2 :(得分:0)
您希望在任何不针对灯箱或其中一个子项的点击上关闭灯箱。您现有的代码非常接近:
$(document).on('click', function(event) {
if (!$(event.target).closest('button').length &&
!$(event.target).closest('.white_content').length) {
$(".lightbox").hide();
}
});
$(document).on('click', function(event) {
if (!$(event.target).closest('button').length &&
!$(event.target).closest('.white_content').length) {
$(".lightbox").hide();
}
});
&#13;
.textright {
float: right;
}
.lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, .8);
}
.white_content {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 5px solid gray;
background-color: white;
z-index:1002;
overflow: auto;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="document.getElementById('lightbox').style.display='inline';">
Show lightbox
</button>
<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
<div class="white_content">
<a href="javascript:void(0)" onclick="document.getElementById('lightbox').style.display='none';" class="textright">Close</a>
<p>Click anywhere to close the lightbox.</p>
<p>Use Javascript to insert anything here.</p>
</div>
</div>
<!-- LIGHTBOX CODE END -->
&#13;
我还建议使用类来表示灯箱是否可见,而不是直接更改显示属性;这样你检查时就会更清楚。将$el.is('.active')
与$(el).css('display') == 'inline'