I’ve a #popup-shadow div that takes all of the viewport, so as to make #popup modal, and forestall all the things out of #popup to be clickable. This works.
Drawback: it even makes all the things inside #popup unclickable. Why?
Since #popup has the next z-index (worth 100!), why is the OK button unclickable?
#popup-shadow { place: fastened; prime: 0; left: 0; width: 100%; top: 100%; z-index: 10; }
#popup { width: 400px; background-color: #eee; z-index: 100; }
#popup-buttons div { font-size: 2em; text-align: heart; padding: 15px 0; }
#popup-buttons div:hover { cursor: pointer; }<div id="popup-wrapper">
<div id="popup-shadow"></div>
<div id="popup">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div id="popup-buttons">
<div onclick="alert();">OK</div>
</div>
</div>
</div>Notice: if we take away <div id="popup-shadow"></div>, it really works.
