"On Page load Pop up"
Bootstrap 3.3.0 Snippet by webenlance

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row text-center"> <h2>OnPage Load Script</h2> <h3>Please like and comment if you love this</h3> <p>Also visit my website <a href="http://webenlance.com/">Webenlance.com</a></p> </div> </div> <!-- use this for popup--> <div id="boxes"> <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">Webenlance <div id="lorem"> <p> Webenlance was established in November 2010 at new delhi, India. The Webenlance is a Digital Commerce company. The Founder of Comapany Have More than 6 + Years of experience in this industries. We have served over 100+ clients all over the India and earned their trust & satisfaction in the quality work we delivered them. We specialize in projects that combine creativity and innovation with the highest levels of quality with intelligent ... </p> </div> <div id="popupfoot"> <a href="http://webenlance.com/" class="close agree">I agree</a> | <a class="agree"style="color:red;" href="http://webenlance.com/">I do not agree</a> </div> </div> <div style="width: 1478px; font-size: 32pt; color:white; height: 602px; display: none; opacity: 0.8;" id="mask"></div> </div> <!-- use this for popup-->
#mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none; } #boxes .window { position:absolute; left:0; top:0; width:440px; height:200px; display:none; z-index:9999; padding:20px; border-radius: 15px; text-align: center; } #boxes #dialog { width:450px; height:auto; padding:10px; background-color:#ffffff; font-family: 'Segoe UI Light', sans-serif; font-size: 15pt; } .maintext{ text-align: center; font-family: "Segoe UI", sans-serif; text-decoration: none; } body{ background: url('bg.jpg'); } #lorem{ font-family: "Segoe UI", sans-serif; font-size: 12pt; text-align: left; } #popupfoot{ font-family: "Segoe UI", sans-serif; font-size: 16pt; padding: 10px 20px; } #popupfoot a{ text-decoration: none; } .agree:hover{ background-color: #D1D1D1; } .popupoption:hover{ background-color:#D1D1D1; color: green; } .popupoption2:hover{ color: red; }
$(document).ready(function() { var id = '#dialog'; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(500); $('#mask').fadeTo("slow",0.9); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); });

Related: See More


Questions / Comments:

Hello there,

I would like to add a delay of 10 seconds before the pop-up comes and then hide it after the next 10 seconds if the person doesn't click anything. Can you help me with that?

Thank you in advance for your help!

mansisensear () - 4 years ago - Reply 0