Afroj Mansoori's Blog

Window model Popup

Afroj Mansoori's photo
Afroj Mansoori
·

2 min read

Create a custom modal window using HTML, CSS, and JavaScript. On clicking a button the modal window should appear and the user can click outside the modal window to close the modal along with a close button which is inside the modal. Also when the modal is open the window should not be scrollable.

solution.

when click submit button it shows popup and clicks ok it will remove it.

<!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>Window model</title>
</head>
<body>
    <div class="container">
        <button type="submit" class="btn">Submit</button>
    </div>
    <div class="popup" id="popup">
        <img src="tick.png" alt="tick">
        <h2>Thank YOu!</h2>
        <p>Your details has been successfully submitted.</p>
        <button type="button" id="press" >Ok</button>
    </div>
    <script>
        const popup=document.querySelector('.popup');
         const button=document.querySelector('.btn');
        popup.addEventListener("click", ()=>{
            popup.classList.remove("openbox");
        });
        button.addEventListener("click", ()=>{
            popup.classList.add("openbox");
        });
        console.log('hello')
    </script>
</body>
</html>

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(51, 68, 79);
}
.btn{
    padding: 10px 60px;
    border: 0px;
    outline: none;
    cursor: pointer;
    font-size: 22px;
    font-weight: 500;
    border-radius: 30px;

}
.popup{
    width: 400px;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%) scale(0.1);
    text-align: center;
    padding:0 30px 30px;
    color: #333;
    visibility: hidden; 
}
.openbox{
    visibility: visible;
    top: 50%;
    transform: translate(-50%,-50%) scale(1);
    transition: transform 0.4s, top 0.4s;
}
.popup img{
    width: 100px;
    margin-top: -50px;
    border: 50%;
    box-shadow:0 2px 5px rgba(0,0,0,0.2) ;
}
.popup h2{
    font-size: 38px;
    font-weight: 500;
    max-width: 30px 0 10px;
}
.popup button{
    width: 100%;
    margin-top: 50px;
    padding: 10px 0;
    background: #6fd649;
    color: #fff;
    border: 0;
    outline: none;
    font-size:18px ;
    border-radius: 4px;
    cursor: pointer;
    box-shadow:0 5px 5px rgba(0,0,0,0.2);
}

after click button

PhysicswalaWeb DevelopmentprojectsJavaScript