弹出式背景不'关闭时不要隐藏
Popup background doesn't hide when closing
我创建了一个弹出窗口,然后将其移动到最终域。现在,背景覆盖(#overlay-back
)在通过角落中的"X"(.close-image
)关闭时不会隐藏,但在按ESC时会隐藏。我错过了什么?
以下是现场直播:http://www.nominee-services.co.uk/
JS:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#overlay-back').fadeIn(800, function () {
$('#popup').show();
});
$(".close-image").on('click', function () {
$('#popup').hide()
});
});
$(".close-image").on('click', function () {
$('#overlay-back').hide();
});
$(document).on('keydown', function (e) {
if (e.keyCode === 27) { // ESC
$('#popup').hide();
}
});
$(document).on('keydown', function (e) {
if (e.keyCode === 27) { // ESC
$('#overlay-back').hide();
}
});
$(document).on('click', function (e) {
if ($(e.target).closest('#popup').length === 0) {
$('#overlay-back').hide();
}
});
$(document).on('click', function (e) {
if ($(e.target).closest('#popup').length === 0) {
$('#popup').hide();
}
});
</script>
CSS:
#popup {
position: absolute;
display: hidden;
top: 50%;
left: 50%;
width: 960px;
height: 98px;
margin-top: -194px;
margin-left: -480px;
background-color: #fff;
z-index: 20;
padding: 5px;
}
#overlay-back {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.7;
filter: alpha(opacity=60);
z-index: 19;
display: none;
}
.close-image {
display: block;
float: right;
cursor: pointer;
z-index: 21;
position: absolute;
right: 8px;
top: 8px;
}
HTML:
<div id="overlay-back"></div>
<div id="popup">
<img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" width="960" height="398" /></span>
</div>
您必须将点击事件放在document.ready()
函数中。
$(".close-image").on('click', function() {
$('#overlay-back').hide();
});
设置事件两次是有原因的吗?
$( document ).on( 'click', function ( e ) {
if ( $( e.target ).closest('#popup').length === 0 ) {
$('#overlay-back').hide();
}
});
$( document ).on( 'click', function ( e ) {
if ( $( e.target ).closest('#popup').length === 0 ) {
$('#popup').hide();
}
});
只需将其更改为
$( document ).on( 'click', function ( e ) {
if ( $( e.target ).closest('#popup').length === 0 ) {
$('#popup').hide();
$('#overlay-back').hide();
}
});
此外,如果您有一个事件(例如window.load),并且您对其进行了两次设置,则会覆盖以前关联的函数。不确定它是否适用于所有事件,但这将是你的问题。
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 隐藏部分背景重复
- Flowplayer视频一直在隐藏的背景中播放
- "隐藏/显示”;元素和更改按钮背景图像
- Chrome通过自动填充隐藏背景图像
- 保持状态打开”;在背景中”;.隐藏,但不要't在Angular UI中离开状态
- 背景图像切换和隐藏选择复选框
- 当父级被隐藏并读取子项的css时,防止下载背景图像
- 如何在没有背景的情况下隐藏模态弹出窗口
- 需要在选项卡菜单中向下滚动时隐藏背景图像
- 当背景图像隐藏时,表格中没有边框
- 在导出图像之前隐藏FabricJS中的背景
- Javascript一直隐藏我的网络背景
- 弹出式背景不'关闭时不要隐藏
- 如何隐藏使用!重要的CSS背景图像
- 屏蔽或隐藏背景图像的路径
- 通过背景点击来消除模态和隐藏模态
- CSS:文本背景:隐藏其他文本;
- 模态背景在单击其中的元素时不会隐藏
- 通过javascript隐藏页面背景