Modal

 

Pop Up Modal

HTML

<div id="container" class="container">

<h1>Hello Friends ...</h1>

<button id="close" class="close">Close</button>

</div>

<button id="open" class="open">Open Modal</button>

CSS

<style>

.container {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: white;

padding: 1.5rem;

width: 24rem;

border-radius: 20px 50px 0px 20px;

text-align: center;

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,

rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12)

0px 4px 6px,

rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09)

0px -3px 5px;

display: none;

animation: mymove 0.5s alternate;

}

@keyframes mymove {

from {

top: 0px;

}

to {

top: 50%;

}

}

.close {

float: right;

cursor: pointer;

width: 100px;

background-color: red;

border: 2px solid black;

color: white;

border-radius: 10px 10px 0px 10px;

}

.open {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 200px;

height: 30px;

cursor: pointer;

border-radius: 10px;

border: 1px solid black;

z-index: -1;

background-color: tomato;

}

</style>

JS

<script>

let open = document.getElementById("open");

let close = document.getElementById("close");

let container = document.getElementById("container");

open.addEventListener("click", function () {

document.getElementById("container").style.display = "block";

document.body.style.backgroundColor = "#d6d6d6a4";

});

close.addEventListener("click", function () {

document.getElementById("container").style.display = "none";

document.body.style.backgroundColor = "white";

});

</script>