How to include pressing the (ESC) Escape key as a method of closing the popup?-CodePudding

First of all, based on my codes below, what should I add to the ourOverlay class to trigger closing the modal by clicking anywhere off of the popup? I am looking to expand functionality a bit.

May I know also what codes to add to include the Escape key press as a method of closing the popup? I believe we will be adding addEventListener and classList.toggle

For my content popup box, how can I make its height flexible so that it can adjust depending on how long my content is?

How can I keep .ourPopup .ourContent to be fixed in the middle of my screen regardless of where the div is placed?

I am so sorry if I am asking too much. Your help will be very much appreciated.

These are my codes:

 <head>
    <title>Simple Popup Box / Modal </title>
    <style>
        .ourPopUp .ourOverlay {
           position: fixed; 
           top: 0px;
           left:0px;
           width: 100vw;
           height: 100vh;
           background: rgba(0,0,0,0.7);
           z-index:1;
           display: none; /* unya nani labi na if ga live server ka */
        }
        .ourPopUp .ourContent {
           position: absolute; 
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%) scale(0);
           background:#fff;
           width: 450px;
           height: 220px;
           z-index: 2;
           text-align: center;
           padding: 20px;
           box-sizing: border-box;
    
        }
        
        .ourPopUp .ourClose-btn {
            cursor: pointer;
           position: absolute;
           right: 20px;
           top: 20px;
           width: 30px;
           height: 30px;
           background:#222;
           color:#fff;
           font-size:25px;
           font-weight: 600;
           line-height: 30px;
           text-align: center;
           border-radius: 50%;
        }
        .ourPopUp.active .ourOverlay {
            display: block;
        }

        .ourPopUp.active .ourContent {
            transition: all 300ms ease-in-out;
            transform: translate(-50%, -50%) scale(1);
        }


    </style>
 </head>
 <body>
    <div  id="myPopUp-1">
        <div ></div>
        <div >
            <div  onclick="togglePopUp()">&times;</div>
            <h1>Simple Popup Box / Modal using HTML CSS & JavaScript</h1>
            <p>A simple popup box / modal  using HTML CSS and JavaScript.
            </p>
        </div>
    </div>
    <button onclick="togglePopUp()">Show Popup</button>

    <script>
        function togglePopUp() {
            document.getElementById("myPopUp-1").classList.toggle("active");

        }

    </script>
 </body>

</html> ```

CodePudding user response：

Add the following function inside you script tag and load it on window load as shown below:

<body onl oad="onloadHandler()">

function onl oadHandler() {
            var popup = document.getElementById("myPopUp-1");
            window.addEventListener("keyup", function (evt) {
                var isPopupVisible = popup.classList.contains('active');
                if (isPopupVisible && evt.keyCode == 27) togglePopUp();
            }
            );
        }

CodePudding user response：

Try these examples!

function keyPress (e) {
    if(e.key === "Escape") {
        // write your logic here.
        document.getElementById("myPopUp-1").classList.toggle("invisible");
    }
}

Or with addEventListener()...

document.body.addEventListener('keypress', function(e) {
  if (e.key == "Escape") {
    document.getElementById("myPopUp-1").classList.toggle("invisible");
  }
});

If you're using JQuery:

    $(document).keyup(function(e) {
     if (e.key === "Escape") { // escape key maps to keycode `27`
        document.getElementById("myPopUp-1").classList.toggle("invisible");
    }
});

You can define css rules to hide the elements with class "invisible". Please let me know if its helped.