Centering jqmodal dialog windows

[dalvarado-2]

Hi,

What is the easiest way to center a jqModal dialog window?  The examples from http://dev.iceburg.net/jquery/jqModal/ seem to have the windows at fixed points on the screen.

Thanks, - Dave

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[bmsterling]

Dave,
you need to do something like:

.jqWindow{
position:absolute;
width:300px;
height: 300px;
margin:-150px 0 0 -150px;
left:50%;
top:50%;
}




--
Benjamin Sterling
http://www.KenzoMedia.com
http://www.KenzoHosting.com
_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[dalvarado-2]

>  -------Original Message-------
>  From: Benjamin Sterling <benjamin.sterling@...>
>  Subject: Re: [jQuery] Centering jqmodal dialog windows
>  Sent: Feb 15 '07 18:28
>  
>  Dave,
>  you need to do something like:
>  
>  .jqWindow{
>  position:absolute;
>  width:300px;
>  height: 300px;
>  margin:-150px 0 0 -150px;
>  left:50%;
>  top:50%;
>  }
>  
>  
>  --
>  Benjamin Sterling
>  [LINK: http://www.KenzoMedia.com] http://www.KenzoMedia.com
>  [LINK: http://www.KenzoHosting.com] http://www.KenzoHosting.com

Thanks for this reply, unfortunately, when I defined the id for my class as

#editPanelTitle {
        position:absolute;
        font-family:verdana,tahoma,helvetica;
        width:  400px;
        display:        none;
        top:50%;
        left:50%;
}

the jqmodal window appeared at the right of the screen, about 100 pixels down from the top, but definitely not vertically aligned.  When I added the "margin" property you suggested, the window did not appear at all.  No JS errors were reported.

 - Dave

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Brice Burgess]

dalvarado@... wrote:

>>  -------Original Message-------
>>  From: Benjamin Sterling <benjamin.sterling@...>
>>  Subject: Re: [jQuery] Centering jqmodal dialog windows
>>  Sent: Feb 15 '07 18:28
>>  
>>  Dave,
>>  you need to do something like:
>>  
>>  .jqWindow{
>>  position:absolute;
>>  width:300px;
>>  height: 300px;
>>  margin:-150px 0 0 -150px;
>>  left:50%;
>>  top:50%;
>>  }
>>  
>>  
>>  --
>>  Benjamin Sterling
>>  [LINK: http://www.KenzoMedia.com] http://www.KenzoMedia.com
>>  [LINK: http://www.KenzoHosting.com] http://www.KenzoHosting.com
>>    
>
> Thanks for this reply, unfortunately, when I defined the id for my class as
>
> #editPanelTitle {
>         position:absolute;
>         font-family:verdana,tahoma,helvetica;
>         width:  400px;
>         display:        none;
>         top:50%;
>         left:50%;
> }
>
> the jqmodal window appeared at the right of the screen, about 100 pixels down from the top, but definitely not vertically aligned.  When I added the "margin" property you suggested, the window did not appear at all.  No JS errors were reported.
>
>  - Dave

Remember, jqModal dialogs/windows/notices/etc get wrapped by a
containing <div> with class "jqmWrap". So, I suggest using this to
*position* your windows, and leave positioning styling out of the actual
dialog/window/notice.

You can provide a different wrapping class by passing the "wrapClass"
parameter. See the JS/CSS tab of example 3. Specifically, it uses the
"placeAbove" class which posistions a window to the upper right of its
relative position (where you would see it if display was set to visible).

Here is the default CSS;

.jqmWindow {
    display: none;
    width: 600px;
    margin: auto;
    background-color: #fff;
    border: 1px solid black;
    padding: 12px;
}

.jqmWrap { /* posistions & contains the modal window */
    position: fixed;
    top: 17%;
    width: 100%;
}

As you can see, it is the wrapping class which positions the window --
and fix positions it 17% from the top. Try using the following for
experimentation;

.jqmWrap { /* posistions & contains the modal window */
    position: absolute;
    width: 100%;
}

If you use IRC, #css on freenode.net or efnet.net have friendly, helpful
folks to give styling advice. Also, http://www.w3schools.org/ is an
excellent resource.

~ Brice


_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/