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:
on clicking show, this screen appears