Log in

View Full Version : jquery popup window that opens on page load?


zeech26
08-20-2010, 06:54 PM
I have found some great CSS / Javascript / Jquery examples of popups that load upon click and open up a box in the center of the page with a transparent black background, but cannot figure out how to make them open automatically upon page load...
Anybody now a script that will automatically generate a popup when the page is loaded?
This is an example of what I am talking about, just need it to open upon page load:
http://www.queness.com/resources/html/modal/jquery-modal-window.html

Thanks for any insight!
zack
www.zeechproductions.com
azoomer
08-20-2010, 08:21 PM
Ty this page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script type="text/javascript">
$(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(1000);
$('#mask').fadeTo("slow",0.8);

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

});

</script>

<style type="text/css">
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#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;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
</style>
</head><body>
<h2><a href="http://www.queness.com/">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2>
<div style="font-size: 10px; color: rgb(204, 204, 204);">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>

<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
Simple Modal Window |
<a href="#" class="close">Close it</a>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>
</html>
zeech26
08-23-2010, 04:42 PM
Thank you!
Now I will try and pick it apart and figure out what you did
thanks so much!
zack
dougie1983
02-22-2011, 10:40 PM
I finally got this to work. For some reason I excluded the #boxes div and it did not work. I still don't understand why.
I also up a picture(X) to close the window. Here is the webpage, you can view the source code
http://www.android-pads.com
dougie1983
02-23-2011, 05:15 AM
Hi, I have a question..

How would you modify this code adding 'cookies' so that if reused on multiple pages, the popup will only load once per session?
Thanks
dougie1983
02-25-2011, 01:59 AM
Ok I think I was able to answer my own question.
This is working for me so far. It allows you to use this on many pages and can decide if you want the popup to be displayed once per session or many times. I altered some code from javascript.com.



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

if (once_per_session==0)
loadpopunder()
else
{
if (get_cookie('popunder')==''){
loadpopunder()
document.cookie="popunder=yes"
}
}



});
</script>

<script type="text/javascript">

//Pop-under window II- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script

//Pop-under only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause popunder to load every time page is loaded
var once_per_session=1

///No editing beyond here required/////

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function loadornot(){
if (get_cookie('popunder')==''){
loadpopunder()
document.cookie="popunder=yes"
}
}
function loadpopunder(){
var id = '#popup';


//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(1000);
$('#mask').fadeTo("slow",0.8);

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

</script>
ddigital
03-07-2011, 06:24 PM
Hello,

I'm trying to put this PopUp to be managed from one dashboard.
Have already created the panel, connected with MySQL and is working properly, my problem is I do not know how to get the PopUp only open when the the item ACTIVE = 1.

I let down the structure of the database.


CREATE TABLE IF NOT EXISTS `popup` (
`id` int(10) unsigned NOT NULL auto_increment,
`titulo` varchar(150) default NULL,
`foto` varchar(150) default NULL,
`texto` text,
`active` tinyint(1) NOT NULL default '1',
`id_session` varchar(8) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;


INSERT INTO `popup` (`id`, `titulo`, `foto`, `texto`, `active`, `id_session`) VALUES
(1, 'Important', '798391b8f9c6.jpg', 'text here...', '1', '1');


I tried to do this so that the PopUp only appears if ACTIVE = 1


<?php
$sql = mysql_query("SELECT * FROM popup");
$linha = mysql_fetch_array($sql);


$popupindex = '<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">

<a href="#" class="close"><font color="#FF0000">Clique aqui para <b>FECHAR</b> esta janela e continuar navegando em nosso site!</font></a><font color="#FF0000">
</font></b>
<? echo nl2br($texto); ?>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
';

$active = "1";
if($active == "1")
{
echo("$popupindex");
}
else
{
echo("");
}
?>


Please help me, because with the above code to PopUp is always shown, even as ACTIVE = 2 which is the value that I put to be inactive.
dougie1983
03-12-2011, 05:48 AM
Yeah you probably don't need the javascript code to do this. Maybe you can try changing the z-index on the divs to make it look like a popup.


$active = "1";
if($active == "1")
{
echo("$popupindex");
}
else
{
echo("");
}
?>
ccscreative
09-07-2011, 01:21 PM
Anyone know how to add an "Auto close" after a few seconds?
djr33
09-07-2011, 08:25 PM
Is there a reason you decided to post in this old thread instead of starting a new discussion?

Here's some basic information. Note that Javascript generally can't close a window that was not opened by Javascript. There is a workaround involving "opening" the current window ("self") using Javascript, then after it has been established as 'belonging' to Javascript, you can close it.
http://www.google.com/search?q=close+window+javascript


Regardless, what you're doing sounds very annoying. I don't want to visit a site that has a popup that then disappears. I wouldn't return. (Maybe if this is 10-60 seconds, I can see the use, but only in rare circumstances. For example, a notification of an account change that says, for example, 'Password changed. This window will automatically close.')




If you want more help, post a new thread and post more information and include a link to your website. I'm closing this thread now.