<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(); }); });