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.
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...
8 Comments
Thank you so much! It's really helpful!
ReplyDeletehi
ReplyDeleteIts not working for Mobiles
It works, Thanks dear
ReplyDeletehello, how do i delay the execution of the script?
ReplyDeleteThis code help me a lot...Thanks for sharing...
ReplyDeleteHow to show two pop up when page is loaded
ReplyDeleteThank you so much, would you help making it just to not display anymore on User Click
ReplyDeletethanks for the code....helpful
ReplyDelete