function openNav(mName, mID) {
console.log('In Open Nav');
document.getElementById('myNav').style.height = '100%';
menuItemOrderButton = document.getElementById('overlay-menuitem-order');
menuItemOrderButton.onclick = addToOrder(mName, mID);
}
function closeNav() {
document.getElementById('myNav').style.height = '0';
console.log("Closing nav!");
}
function addToOrder(mName, mID){
console.log("IT WORKS!");
}.overlay {
height: 0;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
overflow-x: hidden;
overflow-y: hidden;
transition: 0.3s;
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: -10 !important;
}
.overlay-menuitem {
position: relative;
margin: auto;
width: 100%;
max-height: 70% !important;
max-width: 400px;
border: 0px solid #000;
border-radius: 18px;
background:#FFF;
pointer-events:none;
z-index: -5 !important;
}
.overlay-close {
position: absolute;
top: 0%;
right: 0%;
float: right;
background: rgba(255, 255, 255, 0.75);
color: #000;
line-height: 1;
border-radius: 18px;
height: 32px;
width: 32px;
font-size: 29px;
margin-right: 5px;
margin-top: 5px;
cursor: pointer;
z-index: 101;
}
.overlay-order-button {
position: relative;
font-family: "Open Sans", sans-serif;
font-size:16px;
Background: #212326;
background-size:contain;
width:200px;
height:45px;
border:none;
cursor:pointer;
margin-top:12px;
margin-bottom: 30px;
color: #FFF;
font-weight: 500;
letter-spacing:.5px;
border-radius: 4px;
z-index: 100000 !important;
}
<div>
<button onclick="openNav(1,2)"> Click me to open the overlay </button>
<div>
<div id="myNav" class="overlay">
<div class="overlay-content" onclick="closeNav()">
<div class="overlay-menuitem" style="background:#FFF;">
<a href="javascript:void(0)" class="overlay-close" onclick="closeNav()">×</a>
<div id="test" style="position: static;">
<button id="overlay-menuitem-order" class="overlay-order-button">ORDER ONLINE</button>
</div>
</div>
</div>
</div>I am trying to create an overlay upon the click of a box. When this box is clicked, an overlay covers the screen showing a more detailed version of the box the user clicked. See Code snippet above to where the button shown in the overlay is not being clicked and not sending to addToOrder. I added a code snippet per the request of the commenters. The point I am not understanding is why the z-index attributes are not working, even with important tags.
2
Answers
I am not fully understanding the issue you described, but I assume you have an issue with the event bubbling. Check out Event Bubbling topic (e.g. https://www.freecodecamp.org/news/event-bubbling-in-javascript/#how-to-stop-event-bubbling).
Also, you have a typo in your code
onclick="addToOrder(menuItem)>– you are missing closing"after the function.I would also suggest a different structure of the HTML in the first place. To me, it seems you can either remove one level of nesting or at least separate elements. One more thing, check of the
dialogelement in HTML (it might be useful for your case).You have two problems in your code, and they are not related with z-index
The first problem is that you are passing
menuItemOrderButton.onclickthe result of a function call, not its declaration. You need to pass a function declaration. Otherwise what happens is that the function is called when the code runs, then the return value (in this caseundefinedbecause you are not returning anything) is saved as theonclickhandler. In other words, what you are doing here is something like this:menuItemOrderButton.onclick = undefinedI know its confusing because when you define onclick inside HTML, you have to specify the code to be executed (the function call) but inside javascript, you have to put the declaration because the function call will be called immediately when the code is parsed, not when the event happens (as you expect)
That’s why I strognly recommend you to be consistent. Declare your events always in your HTML or always in your javascript (most recommended the latter). That will also help you debug in the future as you will know all the events are registered in one place.
The second problem is that you are using
pointer-events:none;on your modal. This property applies to the whole container, so the elements inside it will also stop listening to events. Maybe you did it with the intend of prevent the event from being capture by the container, but this is not necessary.The following is the fixed code for your reference