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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    jquery popup window not staying center when browser gets maximized

    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>

  • #2
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    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!
    Chuck Norris counted to infinity.
    Twice.

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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.

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    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...
    Chuck Norris counted to infinity.
    Twice.

  • Users who have thanked Arnaud for this post:

    gribbs100 (12-20-2011)

  • #5
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Btw. it is not "buggy" at all in Firefox. Tested on Mac OSX and Windows XP.
    Chuck Norris counted to infinity.
    Twice.

  • Users who have thanked Arnaud for this post:

    gribbs100 (12-20-2011)

  • #6
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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.


  •  

    Tags for this Thread

    Posting Permissions

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