POPUP WITH CLOSE BUTTON

HELLO VIEWERS , After a long time we are back with an another video. Previously we have made WEB PAGE LOADER. So, We are gonna make Popup With Close button. Popup is very useful when you want to indicate a small note to your customer. You can use the given below to use this popup in your website.

If it is difficult to understand the code. Have a look at this video

VIDEO TUTORIAL OF POPUP WITH CLOSE BUTTON

Snap Here To Download The Project File

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup with close button</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" onclick="toggle()">
        <a href="#">Click Here</a>
    </div>

<div id="popup">
        <h2>Notifications</h2> <a href="#" onclick="toggle()">×</a>
        <ul>
            <li class="popup">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            <li class="popup">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            <li class="popup">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            <li class="popup">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            <li class="popup">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
        </ul>
    </div>
</body>

</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
}

body{
    background: #dde1e7;
}

.container a{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    color: black;
    background: #dde1e7;
    padding: 10px 10px;
    border-radius: 5px;
    box-shadow: -3px -3px 7px #ffffffc9,
                2px 2px 5px rgba(0, 0, 0, .473);
}

#popup{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #dde1e7;
    padding: 50px;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
    
}

#popup a{
    position: absolute;
    top: 10px;
    right: 30px;
    background: black;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    padding: 5px 10px;
    box-shadow: -3px -3px 7px #ffffffc9,
    2px 2px 5px rgba(0, 0, 0, .473);
}

#popup.active{
    width: 40%;
    border-radius: 5px;
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
}

#popup h2{
    position: absolute;
    top: 5px;
    left: 10px;
    padding: 5px 5px;
    margin: 10px 0px;
}

#popup ul{
    position: relative;
    top: 20px;
    left: -25px;
}

#popup ul li{
    padding: 5px 5px;
}

Tech Loop

JavaScript

POPUP WITH CLOSE BUTTON

VIDEO TUTORIAL OF POPUP WITH CLOSE BUTTON

Thanks For Visiting

Post a Comment

Post a Comment

About Us

Formulir Kontak

JavaScript

Popup With Close Button

POPUP WITH CLOSE BUTTON

VIDEO TUTORIAL OF POPUP WITH CLOSE BUTTON

Thanks For Visiting

You might like

Post a Comment

Post a Comment

Formulir Kontak