Display popup on page load

This post helps to display the welcome message and events to the website on page load through the popup window. This popup window highlight  message to the user.

When load the page the popup window displayed the message. user can put the images and messages in the popup window. And it have the closing option to close the window and also user close the window to click outside of the popup box.

Here i am used the image to display in the popup box, you can use contents and images even contact forms or feedback form etc... with in the popup div.

Here is the to display the feedback form in popup box on page load.

Screenshot:

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display popup on page load</title>
<link rel="stylesheet" href="swc.css">
</head>
<body>
<div class="maintext">
<h2> Main text goes here...</h2>
</div>
<div id="boxes">
<div style="top: 50%; left: 50%; display: none;" id="dialog" class="window"> 
<div id="san">
<a href="#" class="close agree"><img src="close-icon.png" width="25" style="float:right; margin-right: -25px; margin-top: -20px;"></a>
<img src="san-web-corner.png" width="450">
</div>
</div>
<div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
<script src="swc.js"></script>
</body>
</html>

swc.css

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#26262c;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:850px;
  display:none;
  z-index:9999;
  padding:20px;
  border-radius: 5px;
  text-align: center;
}
#boxes #dialog {
  width:450px; 
  height:auto;
  padding: 10px 10px 10px 10px;
  background-color:#ffffff;
  font-size: 15pt;
}

.agree:hover{
  background-color: #D1D1D1;
}
.popupoption:hover{
background-color:#D1D1D1;
color: green;
}
.popupoption2:hover{
color: red;
}

swc.js

$(document).ready(function() {
var id = '#dialog';
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
        var winH = $(window).height();
var winW = $(window).width();
        $(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
   $(id).fadeIn(2000);
   $('.window .close').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
   });
   $('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});

I hope this post is very helpful to you to show the welcome messages to your sites...

Post a Comment

8 Comments

  1. Thank you so much! It's really helpful!

    ReplyDelete
  2. hi

    Its not working for Mobiles

    ReplyDelete
  3. hello, how do i delay the execution of the script?

    ReplyDelete
  4. This code help me a lot...Thanks for sharing...

    ReplyDelete
  5. How to show two pop up when page is loaded

    ReplyDelete
  6. Thank you so much, would you help making it just to not display anymore on User Click

    ReplyDelete
  7. thanks for the code....helpful

    ReplyDelete