This post helps to display the flash 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 flash 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 with flash message, you can use contents and images even contact forms or feedback form etc... with in the popup div.
When load the page the popup window displayed the flash 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 with flash message, you can use contents and images even contact forms or feedback form etc... with in the popup div.
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...
0 Comments