我创建了一个弹出窗口,然后将其移至最终域。现在,通过拐角处的“ X”(#overlay-back
)关闭时,背景叠加层(.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>
最佳答案
您必须将click事件放入document.ready()
函数中。
$(".close-image").on('click', function() {
$('#overlay-back').hide();
});