www.webdeveloper.com
Results 1 to 2 of 2

Thread: Positioning a modal window

Hybrid View

  1. #1
    Join Date
    Apr 2014
    Posts
    2

    Positioning a modal window

    Hi Everyone!
    I am hoping somebody can help me because I'm yanking my hair out. I'm sure the fix is a simple one, but I just can't see it!

    I have an overlay modal window that is working perfectly save for one thing. The window that opens appears in the center of the browser window. The "close modal" area I can position inline without a problem, but with the main modal, it seems to only want to position in the center of the browser window, whereas, I'd like to just specify how far from the left edge. It is making me nuts, because otherwise the window works perfectly for me.

    For the close div I've got margin left inline. If I try to do it for the modal_window, it is ignored. Thanks a million if anyone can provide any insight..and feel free to laugh that I can't figure it out!

    This is the styling

    #mask{
    position:absolute; /* important */
    top:0px; /* start from top */
    left:0px; /* start from left */
    height:100%; /* cover the whole page */
    width:100%; /* cover the whole page */
    display:none; /* don't show it '*/

    /* styling bellow */
    background-color: white;
    }

    .modal_window{
    position:absolute; /* important so we can position it on center later */
    display:none; /* don't show it */
    z-index:99;
    width:900px; height:830px;
    /* styling bellow */
    color:#000;
    background-color:#fff;
    margin-left:10px;
    }

    /* style a specific modal window */
    #modal_window{
    padding:50px;
    border:1px solid gray;
    background: #246493;
    color:black;
    }


    and this is the code

    $(document).ready(function(){

    //get the height and width of the page
    var window_width = $(window).width();
    var window_height = $(window).height();

    //vertical and horizontal centering of modal window(s)
    /*we will use each function so if we have more then 1
    modal window we center them all*/
    $('.modal_window').each(function(){

    //get the height and width of the modal
    var modal_height = $(this).outerHeight();
    var modal_width = $(this).outerWidth();

    //calculate top and left offset needed for centering
    var top = (window_height-modal_height)/1.3;
    var left = (window_width-modal_width)/3;

    //apply new top and left css values
    $(this).css({'top' : top , 'left' : left});

    });

    $('.activate_modal').click(function(){

    //get the id of the modal window stored in the name of the activating element
    var modal_id = $(this).attr('name');

    //use the function to show it
    show_modal(modal_id);

    });

    $('.close_modal').click(function(){

    //use the function to close it
    close_modal();

    });

    });

    //THE FUNCTIONS

    function close_modal(){

    //hide the mask
    $('#mask').fadeOut(500);

    //hide modal window(s)
    $('.modal_window').fadeOut(500);

    }
    function show_modal(modal_id){

    //set display to block and opacity to 0 so we can use fadeTo
    $('#mask').css({ 'display' : 'block', opacity : 0});

    //fade in the mask to opacity 0.8
    $('#mask').fadeTo(500,0.8);

    //show the modal window
    $('#'+modal_id).fadeIn(500);

    }

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,667
    changes in red
    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>
    <style type="text/css">
    /*<![CDATA[*/
    #mask{
    position:absolute; /* important */
    top:0px; /* start from top */
    left:0px; /* start from left */
    height:100%; /* cover the whole page */
    width:100%; /* cover the whole page */
    display:none; /* don't show it '*/
    
    /* styling bellow */
    background-color: white;
    }
    
    .modal_window{
    position:absolute; /* important so we can position it on center later */
    display:none; /* don't show it */
    z-index:99;
    left:10px;top:10px;
    width:900px; height:830px;
    /* styling bellow */
    color:#000;
    background-color:red;
    margin-left:10px;
    }
    
    /* style a specific modal window */
    #modal_window{
    padding:50px;
    border:1px solid gray;
    background: #246493;
    color:black;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
    /*<![CDATA[*/
    $(document).ready(function(){
    
    //get the height and width of the page
    var window_width = $(window).width();
    var window_height = $(window).height();
    
    //vertical and horizontal centering of modal window(s)
    /*we will use each function so if we have more then 1
    modal window we center them all*/
    $('.modal_window').each(function(){
    
    //get the height and width of the modal
    var modal_height = $(this).outerHeight();
    var modal_width = $(this).outerWidth();
    
    //calculate top and left offset needed for centering
    var top = (window_height-modal_height)/1.3;
    var left = (window_width-modal_width)/3;
    
    //apply new top and left css values
    //$(this).css({'top' : top , 'left' : left});
    
    });
    
    $('.activate_modal').click(function(){
    
    //get the id of the modal window stored in the name of the activating element
    var modal_id = $(this).attr('name');
    
    //use the function to show it
    show_modal(modal_id);
    
    });
    
    $('.close_modal').click(function(){
    
    //use the function to close it
    close_modal();
    
    });
    
    });
    
    //THE FUNCTIONS
    
    function close_modal(){
    
    //hide the mask
    $('#mask').fadeOut(500);
    
    //hide modal window(s)
    $('.modal_window').fadeOut(500);
    
    }
    function show_modal(modal_id){
    
    //set display to block and opacity to 0 so we can use fadeTo
    $('#mask').css({ 'display' : 'block', opacity : 0});
    
    //fade in the mask to opacity 0.8
    $('#mask').fadeTo(500,0.8);
    
    //show the modal window
    $('#'+modal_id).fadeIn(500);
    
    }
    /*]]>*/
    </script></head>
    
    <body>
    <input class="activate_modal" type="button" name="pop1" value="open" />
     <div id="pop1" class="modal_window" >
      <br />
      <input class="close_modal" type="button" name="pop1" value="close" />
     </div>
     <div id="mask" ></div>
    </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/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles