Apply HTML, CSS, JS to customize the popup effect

HTML section
First, there's a button to trigger the event.
Pop-up window background (usually full screen z-index and BackgroundColor)
Pop-up window container (header, body, footer)
It is worth mentioning that we generally give the element class name and ID
ID is used to get the element class used to set the style
CSS Section
Set the appropriate style first.
animation xx 2s with @keyframes to achieve animation effect
JavaScript section
Gets the popup element through the JS control css to make it hide or show
var modal = document.getElementById ("Simplemodal");

Get button Element
var modalbtn = document.getElementById ("modalbtn");

Get close Popup button element
var closebtn = document.getelementsbyclassname (' closebtn ') [0];

Listening to open pop-up events It's worth mentioning that the Listener command is similar to jquery's on.
Modalbtn.addeventlistener ("click", Openmodal);

Listen to close pop-up window events
Closebtn.addeventlistener ("click", Closemodal);

Monitor window close the pop-up window here in order to achieve the click of the window to achieve close
Window.addeventlistener ("click", Outsiteclick);

Pop-up window event
function Openmodal () {
Modal.style.display = "block";
}

Close the pop-up window
function Closemodal () {
Modal.style.display = "None";
}

Outsiteclick
function Outsiteclick (e) {
if (E.target = = modal) {
Modal.style.display = "None";
}
}

Apply HTML, CSS, JS to customize the popup effect