jquery popup window not staying center when browser gets maximized

gribbs100 · 12-19-2011, 09:59 PM

Hello Guys,

I tried downloading a pre-packages jquery popup box that opens on click of a link and shows up centered on the page but lets say that you opened the popup and your browser wasnt full size then while popup is open, you decide to maximize the browser, well the box doesnt recenter. is there a way to adjust that to work?

This was the code I downloaded

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>
<title>Simple JQuery Modal Window</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
	
		//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>
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;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}
</style>
</head>
<body>
<h2><a href="http://www.queness.com">Simple jQuery Modal Window Examples</a></h2>

<ul>
<li><a href="http://www.queness.com">Normal Link</a></li>
<li><a href="#dialog" name="modal">Simple Window Modal</a></li>
<li><a href="#dialog1" name="modal">Login Dialog Box</a></li>
<li><a href="#dialog2" name="modal">Sticky Note</a></li>
</ul>
<div id="boxes">
  
  <div id="dialog" class="window">
Simple Modal Window | 
<a href="#"class="close"/>Close it</a>
</div>
  
<!-- Start of Login Dialog -->  
<div id="dialog1" class="window">
  <div class="d-header">
    <input type="text" value="username" onclick="this.value=''"/><br/>
    <input type="password" value="Password" onclick="this.value=''"/>    
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
</div>
<!-- End of Login Dialog -->  



<!-- Start of Sticky Note -->
<div id="dialog2" class="window">
  So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want! Simple and Easy to modify : ) <br/><br/>
<input type="button" value="Close it" class="close"/>
</div>
<!-- End of Sticky Note -->



<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>



</body>
</html>

Arnaud · 12-20-2011, 11:01 AM

Well, there's always a way ! ;-)

I don't want to dig deeply in your code, but it seems that the centering of the elements is not perfect anyway.

But this said, you could do something like that:

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>
        <title>Simple JQuery Modal Window</title>

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script>

            $(document).ready(function() {	

                //select all the a tag with name equal to modal
                $('a[name=modal]').click(function(e) {
                    //Cancel the link behavior
                    e.preventDefault();
		
                    //Get the A tag
                    var id = $(this).attr('href');
	
                    //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();
                });			

                $(window).resize(function() {
                    resizeUI();
                });
            });

            function resizeUI() {
                    //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});
	
                    //Get the window height and width
                    var winH = $(window).height();
                    var winW = $(window).width();
              
                    //Set the popup window to center
                    $('#dialog1').css('top',  winH/2-$('#dialog1').height()/2);
                    $('#dialog1').css('left', winW/2-$('#dialog1').width()/2);               
            }
        </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;
            }

            #boxes #dialog1 {
                width:375px; 
                height:203px;
            }

            #dialog1 .d-header {
                background:url(images/login-header.png) no-repeat 0 0 transparent; 
                width:375px; 
                height:150px;
            }

            #dialog1 .d-header input {
                position:relative;
                top:60px;
                left:100px;
                border:3px solid #cccccc;
                height:22px;
                width:200px;
                font-size:15px;
                padding:5px;
                margin-top:4px;
            }

            #dialog1 .d-blank {
                float:left;
                background:url(images/login-blank.png) no-repeat 0 0 transparent; 
                width:267px; 
                height:53px;
            }

            #dialog1 .d-login {
                float:left;
                width:108px; 
                height:53px;
            }

            #boxes #dialog2 {
                background:url(images/notice.png) no-repeat 0 0 transparent; 
                width:326px; 
                height:229px;
                padding:50px 0 20px 25px;
            }
        </style>
    </head>
    <body>
        <h2><a href="http://www.queness.com">Simple jQuery Modal Window Examples</a></h2>

        <ul>
            <li><a href="http://www.queness.com">Normal Link</a></li>
            <li><a href="#dialog" name="modal">Simple Window Modal</a></li>
            <li><a href="#dialog1" name="modal">Login Dialog Box</a></li>
            <li><a href="#dialog2" name="modal">Sticky Note</a></li>
        </ul>
        <div id="boxes">

            <div id="dialog" class="window">
                Simple Modal Window | 
                <a href="#"class="close"/>Close it</a>
            </div>

            <!-- Start of Login Dialog -->  
            <div id="dialog1" class="window">
                <div class="d-header">
                    <input type="text" value="username" onclick="this.value=''"/><br/>
                    <input type="password" value="Password" onclick="this.value=''"/>    
                </div>
                <div class="d-blank"></div>
                <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
            </div>
            <!-- End of Login Dialog -->  



            <!-- Start of Sticky Note -->
            <div id="dialog2" class="window">
                So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want! Simple and Easy to modify : ) <br/><br/>
                <input type="button" value="Close it" class="close"/>
            </div>
            <!-- End of Sticky Note -->



            <!-- Mask to cover the whole screen -->
            <div id="mask"></div>
        </div>



    </body>
</html>

What I added is:

Code:

                $(window).resize(function() {
                    resizeUI();
                });

and the resizeUI function that is called when the window is resized.

Good luck!

gribbs100 · 12-20-2011, 01:31 PM

Thank you for the help but it is still behaving buggy in Firefox. Actually, the sample offers a few choices. The one for a login sample re-centers but the basic box one does not work. it is not re-centering.

Any additional help would be great.

Arnaud · 12-20-2011, 02:51 PM

Well, yes... I did it for the login form.

With the (working) code I gave you, you should be able to understand how to do it for the other elements you need... if you spend 2 minutes trying to understand what the code does IMO.

Which would be basically to add 2 lines for each element you need the same behavior in the resizeUI function...

Code:

$('#dialog2').css('top',  winH/2-$('#dialog2').height()/2);
$('#dialog2').css('left', winW/2-$('#dialog2').width()/2);

And so on...

You just need to get the window size (width, height) and then to place each element on the page accordingly.

winH is your "window Height" so you set each element "top" css value to "half the window height -minus- half your element's height" (hence the /2) -> the same applies for the width.

Your code could actually be easier and cleaner... What about:

Code:

$('#dialog1').css({
    'top' : ((winH / 2) - ($('#dialog1').height() / 2)) + 'px',
    'left' : ((winW / 2) - ($('#dialog1').width() / 2)) + 'px'
});

And the same applies to #dialog2 and any other element you want to center on your page.

There is a "thanks" button below this post...

Arnaud · 12-20-2011, 02:52 PM

Btw. it is not "buggy" at all in Firefox. Tested on Mac OSX and Windows XP.

gribbs100 · 12-20-2011, 05:05 PM

thank you for the help. I appreciate it. I had not looked over the code well and assumed that the fix applied for all elements. I understand now. It is working great! Thanks again. I learned something today!

Oh, I like your Chuck Norris Signature

. he's the best and starred in one of my favorite movies actually.