Simple PopUp With Javascript

 Simple PopUp With Javascript 

Javascript .....

let myClickBtn = document.querySelector(".BtnMy");

let myPopupDiv = document.querySelector(".popup");

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

    myPopupDiv.style.top="50%";

});

let xtr = document.querySelector(".full");

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

    myPopupDiv.style.top="-50%";

});

Css Code....

*{

    padding: 0;

    margin: 0;

}

/* body{

    background: linear-gradient(to right, #ff523b, rgb(239, 255, 16));

} */

.full{

    width: 100%;

    background: rgb(255, 227, 227);

    height: 100vh;

}

.BtnMe{

    position: absolute;

    top: 50%;

    left: 50%;

}

.popup{

    color: #000;

    background: linear-gradient(to right, #ff523b, rgb(239, 255, 16));

    width: 50%;

    height: 150px;

    position: fixed;

    border-radius: 10px;

    text-align: center;

    top: -70%;

    left: 50%;

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

    transition: all 1.2s;

}

Html Code...

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>ddd</title>

</head>

<body>

    <div class="full">

        <h2>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus, nulla.</h2>

    </div>

    <div class="BtnMe">

        <button class="BtnMy">Click Her</button>

    </div>

    <div class="popup">

        <h1>Some text her for popup</h1>

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore nesciunt vitae mollitia.</p>

    </div>

</body>

<script src="index.js"></script>

</html>