Pop up Screen using CSS
In this article we are going to see how to create a pop-up screen using jquery and CSS. We are going to set a link, When user clicks that link a pop-up screen will get displayed and a video has been embedded in the pop-up screen (Autoplay video). We are going to have a close button in the pop-up screen which brings it back to main page.

<html>
    <head>
        <title>Pop-Up Screen Example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="jquery-1.11.3.min.js"></script>
        <style>
             .background
            {
                display:none;
                top:0;
                left:0;
                height: 100%;
                    width: 100%;
                //min-width:100%;
               // min-height:100%;/*these make the opacity provider fill the screen*/
                opacity:0.2;
                //filter:alpha(opacity=50);  
                position:absolute;
                background:black;
                z-index:100;  
            }

            .popscreen
            {
                width:500px;
                height:500px;
                border-radius: 25px;
                padding: 20px; 
                display:none;
                background:white;
                z-index:101;   /*must be greater than the opacity provider*/   
                position:fixed;  
                top:100px; 
                left:10%; /*centers the div*/
                
            }
            .circle
            {
            width:30px;
            height:30px;
    border-radius:250px;
    font-size:15px;
    color:#fff;
    //line-height:500px;
    //text-align:center;
    background:#000
    }
        </style>
        <script>
            $(function() {
    $("#pop1").click(function() {
        $(".popshow").show();

        return false;
    });
    $("#pop2").click(function() {
        $(".popshow").hide();
        return false;
    });
});
        </script>
    </head>
    <body>
        
        <div class="popshow background">

        </div>
        <a href=" " id="pop1">Show</a>
        <div class="popshow popscreen">
           <iframe width="420" height="315" src="https://www.youtube.com/embed/mc3h7LB-0fY?autoplay=1">
           </iframe> <br>
           <center>
                <a href=" " id="pop2" class="circle"> Close Window</a>
           </center>
           
        </div>

        
    
    </body>
</html>

Output:
op1
on clicking show, this screen appears
op2

By Sri

Leave a Reply

Your email address will not be published. Required fields are marked *