Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make simple Overlay popup ?

    • 0
    • 0
    • 0
    • 1
    • 1
    • 0
    • 0
    • 0
    • 7.09k
    Comment on it

    Hello readers!

    Here is Example of Overlay popup. It is very simple and responsive.

    Hope it will helps you somewhere.

    Html:-

    <div class="container-popup"></div>
    <div class="popup">
                <span id="close">X</span>
    </div>
    

    CSS:-

    html { 
      background: url(http://lorempixel.com/400/400) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    
    .container-popup {
        position: relative;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.8);
        z-index: -1;
    }
    
    .popup {
        width: 50%;
        height: 50%;
        background: #1abcb9;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        z-index: 1;
    }
    

    Script:-

    $(document).ready(function(){
        $(".container-popup, #close").click(function(){
        $('.popup').hide(); $('.container-popup').hide();
         });
    });
    

    Below is a working demo link

    http://jsfiddle.net/THE_MukulKant/jp1jLuyj/

 1 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: