I have a situation where I have two elements stacked on top of each other. When I click a button in the first element, the second element opens on top of it. What I am trying to achieve is to make the underlying element non-interactive while the overlaying element is open (meaning that no interactions can happen with the underlying element).
JavaScript code:
$('#button').on('click', function()
{
$('#underlaying-div).fadeTo("fast", 0.7);
$('#overlaying-div).css('display', 'block');
//Add code here to make the underlaying div unclickable
});
$("#overlaying-div").on("click", function() {
$(this).hide();
$('#underlaying-div).fadeTo("slow", 1.0);
//Add code here to make the underlaying div clickable again
});
CSS code:
#overlay-div
{
position:absolute;
left:0;
top:0;
display:none;
z-index: 20000;
}
I am aware that event.preventDefault() can prevent actions when clicking on an element in the underlying div, but I prefer to disable all interactions completely when hovering over a button (with preventDefault(), hover, and related functionalities still active).
Are there any alternative solutions using CSS or JavaScript/jQuery to resolve this issue?