I am currently facing an issue with a function that triggers an overlay on mouseenter event and needs to be unbound. I want to incorporate a way to close the overlay with a specific 'x' element and allow the user to trigger the event again. However, my current code is not working as expected even when I remove the unbind event which causes CSS formatting issues.
Here's the function in question:
$(function() {
$(document).mouseenter(function(event){
event.stopPropagation();
var docHeight = $(document).height() - ($(document).height() * .1);
if(event.pageY > docHeight){
$("#overlay").show();
displayOverlay();
displayModal(itemCount, imageArray, cartTotal);
$(this).unbind('mouseenter mouseleave');
}
$("#x").click(function(){
$("#overlay").hide();
});
});
});
and here is my CSS styling for the overlay and modal:
function displayOverlay() {
$("<div id='overlay'></div>").css({
"position": "fixed",
"top": "0px",
"height": "1200px",
"width": "100%",
"z-index": 100,
"background-color": "rgba(0,0,0,0.5)"
}).appendTo("body");
}
function displayModal(itemCount, imageArray, cartTotal) {
// CSS styling for modal and its components
}