Results 1 to 10 of 10

Thread: jquery popup window that opens on page load?

  1. #1
    Join Date
    Mar 2008
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default jquery popup window that opens on page load?

    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/htm...al-window.html

    Thanks for any insight!
    zack
    www.zeechproductions.com

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Ty this page
    Code:
    <!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>

  3. #3
    Join Date
    Mar 2008
    Posts
    46
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default That worked great!!!

    Thank you!
    Now I will try and pick it apart and figure out what you did
    thanks so much!
    zack

  4. #4
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default jquery popup window that opens on page load with cookies loads once per session

    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.

    Code:
    <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>

  7. #7
    Join Date
    Mar 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question PopUp with MySql

    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.
    Code:
    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
    Code:
    <?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.
    Last edited by ddigital; 03-07-2011 at 07:11 PM.

  8. #8
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.
    Code:
     
    $active = "1";
    if($active == "1")
    {
        echo("$popupindex");
    }
    else
    {
        echo("");
    }
    ?>

  9. #9
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Anyone know how to add an "Auto close" after a few seconds?

  10. #10
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •