Open Popup On Page Load In Html and PHP
Welcome to Webcodeschool.com. In this blog, you ‘ll learn how to open a popup box on the load of the website or we can say Open Popup On Page Load In Html and PHP. In popup, we can display any kind of content like image, Text, Form etc. Sometimes its good that for display an offer or a notification to the user or it can be a contact form or feedback form.
In Popup Box, you ‘ll see a cross button so if the user wants to close it he can do easily.
Open Popup On Page Load In Html and PHP
Please have look at the following the code.
index.html
Open Popup Image On Page Load In Html and PHP
Main Container
style.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;
}
cus.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();
});
});
Check Out our another recent article with Video