Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2007
    Location
    Norway
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Make popup center in the middle of the screen

    I use a JavaScript to create a popup. For some reason the popup appears in the middle of the page, as opposed to the middle of the screen thus forcing people to scroll down to see it.

    Is there a way to make the popup center in the middle of the screen?

    Code:
    function toggle(div_id) {
    	var el = document.getElementById(div_id);
    	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
    	else {el.style.display = 'none';}
    }
    function blanket_size(popUpDivVar) {
    	if (typeof window.innerWidth != 'undefined') {
    		viewportheight = window.innerHeight;
    	} else {
    		viewportheight = document.documentElement.clientHeight;
    	}
    	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
    		blanket_height = viewportheight;
    	} else {
    		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
    			blanket_height = document.body.parentNode.clientHeight;
    		} else {
    			blanket_height = document.body.parentNode.scrollHeight;
    		}
    	}
    	var blanket = document.getElementById('blanket');
    	blanket.style.height = blanket_height + 'px';
    	var popUpDiv = document.getElementById(popUpDivVar);
    	popUpDiv_height=blanket_height/2-200;//200 is half popup's height
    	popUpDiv.style.top = popUpDiv_height + 'px';
    }
    function window_pos(popUpDivVar) {
    	if (typeof window.innerWidth != 'undefined') {
    		viewportwidth = window.innerWidth;
    	} else {
    		viewportwidth = document.documentElement.clientWidth;
    	}
    	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
    		window_width = viewportwidth;
    	} else {
    		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
    			window_width = document.body.parentNode.clientWidth;
    		} else {
    			window_width = document.body.parentNode.scrollWidth;
    		}
    	}
    	var popUpDiv = document.getElementById(popUpDivVar);
    	window_width=window_width/2-300;//300 is half popup's width
    	popUpDiv.style.left = window_width + 'px';
    }
    function popup(windowname) {
    	blanket_size(windowname);
    	window_pos(windowname);
    	toggle('blanket');
    	toggle(windowname);		
    }
    HTML:

    Code:
    <div id="blanket" style="display:none;"></div>
    <div id="popUpDiv" style="display:none;">
    <a href="#" onclick="popup('popUpDiv')">Close</a>
    test
    </div>
    CSS:

    Code:
    #blanket {
       background-color:#111;
       opacity: 0.65;
       *background:none;
       position:absolute;
       z-index: 1001;
       top:0px;
       left:0px;
       width:100%;
    }
    
    #popUpDiv {
    	position:absolute;
    	width:600px;
    	height:400px;
    	border:5px solid #000;
    	z-index: 1002;
    	padding: 16px;
    	border: 5px solid #50563C;
    	border-radius:15px;
    	background-color: #FFFFFF;
    }

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,897
    Thanks
    202
    Thanked 2,530 Times in 2,508 Posts
    Code:
    <script type = "text/javascript">
    
    function windowOpener(windowHeight, windowWidth, windowName, windowUri) {
    var centerWidth = (window.screen.width - windowWidth) / 2;
    var centerHeight = (window.screen.height - windowHeight) / 2;
    newWindow = window.open(windowUri, windowName, 'resizable=0,width=' + windowWidth + 
            ',height=' + windowHeight + 
            ',left=' + centerWidth + 
            ',top=' + centerHeight);
    
    newWindow.focus();
    
    }
    
    windowOpener(400,400,"myWindow","http://www.google.com")
    
    
    </script>
    Don't forget that browsers block unrequested pop-ups.

    We've got to give it a bit more time before we make a snap judgement. - Commentator BBC 1

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Feb 2007
    Location
    Norway
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but I cannot see how this piece of code is related to my question? It's a completely different solution.

    I've made a temporary fix in which the following line is removed from the JS:

    Code:
    popUpDiv.style.top = popUpDiv_height + 'px';
    and added:
    Code:
    top: 200px;
    to #popUpDiv.

    However, I would really like to see it centered on the screen. Now it has a fixed height.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Your popUpDiv position is defined relative to the body of the document, that is, the window, and not relative to the screen. It's not a separate window, so it can't be defined relative to the screen. You could try using position: fixed; that may give results more to your liking.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,897
    Thanks
    202
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by Wombat View Post
    Thanks, but I cannot see how this piece of code is related to my question? It's a completely different solution.
    Oh, sorry I spoke! I thought you wanted to display a pop-up window in the centre of the screen

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New Coder
    Join Date
    Feb 2007
    Location
    Norway
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    You could try using position: fixed; that may give results more to your liking.
    I really should have thought of that myself. It looks much better now, thanks a lot.

  • #7
    New Coder
    Join Date
    Feb 2007
    Location
    Norway
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    While slightly off topic for my original question, my next issue is to limit the pop-up to only show on the first visit.

    Actually, I have a piece of code that works, but not along with the above JS and pop-up.

    Code:
           <script type="text/javascript">
               function setCookie(name, value, expires, path, domain, secure) {
                   document.cookie = name + "=" + escape(value) +
        ((expires) ? "; expires=" + expires : "") +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        ((secure) ? "; secure" : "");
               }
               function getCookie(name) {
                   var cookie = " " + document.cookie;
                   var search = " " + name + "=";
                   var setStr = null;
                   var offset = 0;
                   var end = 0;
                   if (cookie.length > 0) {
                       offset = cookie.indexOf(search);
                       if (offset != -1) {
                           offset += search.length;
                           end = cookie.indexOf(";", offset);
                           if (end == -1) {
                               end = cookie.length;
                           }
                           setStr = unescape(cookie.substring(offset, end));
                       }
                   }
                   if (setStr == 'false') {
                       setStr = false;
                   }
                   if (setStr == 'true') {
                       setStr = true;
                   }
                   if (setStr == 'null') {
                       setStr = null;
                   }
                   return (setStr);
               }
               function hidePopup() {
                   setCookie('popup_state', false);
                   document.getElementById('popUpDiv').style.display = 'none'; document.getElementById('blanket').style.display = 'none';
               }
               function showPopup() {
                   setCookie('popup_state', null);
                   document.getElementById('popUpDiv').style.display = 'block'; document.getElementById('blanket').style.display = 'block';
               }
               function checkPopup() {
                   if (getCookie('popup_state') == null) { // if popup was not closed
                       document.getElementById('popUpDiv').style.display = 'block'; document.getElementById('blanket').style.display = 'block';
                   }
               }
    
    </script>
    Perhaps the error is that I try to execute both scripts with body onload, like this:

    Code:
    <body onload="popup('popUpDiv');'checkPopup()';">
    I have tried unsuccessfully to merge the two scripts, but I seem to be stuck.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,494
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    
    
    <script type = "text/javascript">
    
    function windowOpener(windowHeight, windowWidth, windowName, windowUri,days) {
     if (!cookie('windowOpener')){
      var centerWidth = (window.screen.width - windowWidth) / 2;
      var centerHeight = (window.screen.height - windowHeight) / 2;
      newWindow = window.open(windowUri, windowName, 'resizable=0,width=' + windowWidth +',height=' + windowHeight +',left=' + centerWidth +',top=' + centerHeight);
      newWindow.focus();
      days=days||-1;
      typeof(days)=='session'||typeof(days)=='number'?document.cookie='windowOpener=true'+(typeof(days)=='number'?';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path/;':';'):null;
     }
    }
    
    function cookie(nme){
     var re=new RegExp(nme+'=[^;]+','i');
     return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
    }
    
    
    windowOpener(400,400,"myWindow","http://www.google.com",5); // 5 is the number of days to store the cookie or if 'session' store for the browser session
    
    
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New Coder
    Join Date
    Feb 2007
    Location
    Norway
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I still can't figure it out, so if anyone wants to get paid to do it I've posted a job in Web Projects and Services Marketplace > Web Projects > Small projects (quick fixes and changes): Need first visit pop-up to disappear forever after user clicks close


  •  

    Posting Permissions

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