Here's the code snippet I've been working with:
if ($('body.page-service-map').length || $('body.page-contact').length) {
$(document.body).append('<div class="black-overlay"></div>');
}
$('body.page-service-map img, body.page-contact img').on('click', function () {
var c = $(this).clone();
c.addClass('service-map-expanded');
$(document.body).append('<div class="service-map-container"></div>');
$('.service-map-container').append('<div class="service-map-close"></div>', c);
$('.black-overlay').show();
});
$('.service-map-close').on('mouseover', function () {
$('.service-map-container').remove();
$('.black-overlay').hide();
});
I'm trying to incorporate a close button into this custom image popup. The close button is visible, but it seems that the mouse events are not triggering as expected. Despite that, the button does respond properly to CSS hover effects.
Below is the corresponding CSS for the setup:
.service-map-container {
position: fixed;
top: 50%;
left: 50%;
margin-left: -500px;
margin-top: -300px;
width: 1000px;
z-index: 9990;
}
.service-map-close {
position: absolute;
top: -25px;
right: -25px;
width: 28px;
height: 28px;
background: url('../images/close.gif') no-repeat scroll 1px 1px #FFF;
z-index: auto;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
cursor: pointer;
}
.service-map-close:hover {
background-position: -25px 1px;
}
.service-map-expanded {
width: 1000px;
z-index: auto;
}
.black-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 8888;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
display: none;
}