Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • A Popup Window Using CSS3 Without Javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.01k
    Comment on it

    Hello, reader's In this blog I have created a popup window using CSS3 but without Javascript.

    In this example , I have created a box div having button which when clicked, a popup window will appear. Next I have created a popup div with a close class inside an anchor tag containing content in it.

    Below is the HTML code of the example :-

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <meta content="width=device-width, initial-scale=1" name="viewport">
    
    <title>Popup Window using CSS without javascript</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    </head>
    
    <body>
    
    <div class="container">
    
    <h1>Popup/Modal Window without JavaScript</h1>
    
    <div class="box">
    
    <a class="button" href="#popup1">Let me Pop up</a>
    
    </div>
    
    <div id="popup1" class="overlay">
    
    <div class="popup">
    
    <h2>Here i am</h2>
    
    <a class="close" href="#"></a>
    
    <div class="content">
    
    Thanks for pop me out of that button, but now i'm done so you can close this window.
    
    </div>
    
    </div>
    
    </div>
    
    </div>
    
    </body>
    
    </html>

    In the CSS , In the box div I have set the width and inside the box adjusted the background , border-radius and provided a border to it.

    To the button class, I have applied the border-radius, set the border and have set the transition property and whenever we hover on the button the background changes into orange colour.

    To the overlay class , I have set its position absolute and has used visibility:hidden which helps to hide the content i.e the popup window text. In this I have also used target selector to the overlay class which is used to style the current active target element.

    Next for the popup , i have created a popup class and have set various properties for its display by setting the transition to all 5s ease-in-out.

    Inside the popup class div, in the anchor tag I have created a close class for closing the popup window when not needed and set its position absolute with the transition property for 200ms.

    I have changed the close icon colour to orange whenever we hover over it.
    Below is the CSS Code of the example :-

    body {
    
    font-family: Arial, sans-serif;
    
    background: url(../images/computer-564136_1280.jpg) no-repeat;
    
    background-size: cover;
    
    }
    
    h1 {
    
    text-align: center;
    
    font-family: Tahoma, Arial, sans-serif;
    
    color: orange;
    
    margin: 100px 0;
    
    }
    
    .box {
    
    width: 20%;
    
    margin: 0 auto;
    
    background: rgba(255,255,255,0.2);
    
    padding: 35px;
    
    border: 2px solid #fff;
    
    border-radius: 20px/50px;
    
    background-clip: padding-box;
    
    text-align: center;
    
    }
    
    .button {
    
    font-size: 1em;
    
    padding: 10px;
    
    color: #fff;
    
    border: 2px solid orange;
    
    border-radius: 20px/50px;
    
    text-decoration: none;
    
    cursor: pointer;
    
    transition: all 0.3s ease-out;
    
    }
    
    .button:hover {
    
    background: orange;
    
    }
    
    .overlay {
    
    position: absolute;
    
    top: 0;
    
    bottom: 0;
    
    left: 0;
    
    right: 0;
    
    background: rgba(0, 0, 0, 0.7);
    
    transition: opacity 500ms;
    
    visibility: hidden;
    
    opacity: 0;
    
    }
    
    .overlay:target {
    
    visibility: visible;
    
    opacity: 1;
    
    }
    
    .popup {
    
    margin: 70px auto;
    
    padding: 20px;
    
    background: #fff;
    
    border-radius: 5px;
    
    width: 30%;
    
    position: relative;
    
    transition: all 5s ease-in-out;
    
    }
    
    .popup h2 {
    
    margin-top: 0;
    
    color: #333;
    
    font-family: Tahoma, Arial, sans-serif;
    
    }
    
    .popup .close {
    
    position: absolute;
    
    top: 20px;
    
    right: 30px;
    
    transition: all 200ms;
    
    font-size: 30px;
    
    font-weight: bold;
    
    text-decoration: none;
    
    color: #333;
    
    }
    
    .popup .close:hover {
    
    color: orange;
    
    }
    
    .popup .content {
    
    max-height: 30%;
    
    overflow: auto;
    
    }

    Conclusion :-

    Hence, a popup window is created using CSS3 properties which is easy to understand and helps in creating an effective website by using it in the webpage.

    Note :- The following example will run on the latest version browsers efficiently such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: