Home>

javascript - i want to be able to interfere with elements after overlaying with jquery

I want to be able to interfere (click, hover, etc.) with the screen elements (buttons, etc.) after darkening. I know I can't interfere with the elements behind because the overlay covers the screen, but I'd like to know if there is a way.
I think this is the first time I ask a question, so thank you.

Source code

The current status is listed here.

I want to be able to push the button with the overlay on, instead of increasing the z-index of the button and pushing the button forward.

<! DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width = device-width">
    <link rel = "stylesheet" type = "text/css" href = "style.css">
    <title>jQuery test</title>
    <script src = "jquery-3.4.1.min.js"></script>
    <script src = "modal.js"></script>
</head>
    <body>
         
        <button>button</button>
    </body>
</html>
# div1 {
    z-index: 1;
    position: fixed;
    width: 97vw;
    height: 98vh;
    background-color: black;
    opacity: 0.7;
    display: none;
}
$(function () {
    $('# div1'). fadeIn (500);
});

I read through the web and technical books, but I couldn't find them well.

javascript html jquery css
  • Answer # 1

    How about it?

    # div1 {
    z-index: 1;
    position: fixed;
    width: 97vw;
    height: 98vh;
    background-color: black;
    opacity: 0.7;
    display: none;
    pointer-events: none;// added
}

    [Reference]
    https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

Related articles