9

I'm trying to center a modal dialog in scrolled window. This modal are position absolute because must be draggable in screen. I use this plugin for draggable function:

http://threedubmedia.com/code/event/drag

My problem is that this modal has position absolute if I put top: 50% it display modal in center window but not considering all scrolled window.

j08691
  • 204,283
  • 31
  • 260
  • 272
paganotti
  • 5,591
  • 8
  • 37
  • 49

5 Answers5

25

You should use 

position:fixed

instead absolute/relative.

position:fixed The element is positioned relative to the browser window.

Use this and you should not face any issues due to scrolling.

http://www.w3schools.com/cssref/pr_class_position.asp

You can see this topics, too:

Fixed Positioning without Scrolling

How to place a div center of the window after scrolling

Community
  • 1
  • 1
gotqn
  • 42,737
  • 46
  • 157
  • 243
  • I test with position: fixed, but jquery draggable plugin doesn't work. – paganotti Sep 25 '12 at 16:28
  • I suppose this is because of the css of its parent elements. Could you provide some source code or fiddle example? – gotqn Sep 25 '12 at 16:32
  • this does not work well on ios safari. On scroll elements behind the modal will be "tappable" which is not the intended behavior of modals. – greaterKing May 20 '15 at 18:22
13

So your dialog has its position set to absolute and it is an immediate child of the document/body, right !?

Centering a prompted modal with absolute position:

// Get the document offset :
var offset = $(document).scrollTop(),

// Get the window viewport height
viewportHeight = $(window).height(),

// cache your dialog element
   $myDialog = $('#MY_DIALOG');

// now set your dialog position
$myDialog.css('top',  (offset  + (viewportHeight/2)) - ($myDialog.outerHeight()/2));
Stphane
  • 3,368
  • 5
  • 32
  • 47
1

If it is inside of a scrollable div, make sure that original div is: <div style="position:relative;">.

That way, a div inside it that is absolute will stay within the confines of it, and use its parent relative div as a reference point for top:50%;

Mark Pieszak - Trilon.io
  • 61,391
  • 14
  • 82
  • 96
1

In general, to find the center of the viewport with scroll bars. Take window height, divided by 2, plus scroll top. Result is the number of pixles that something should be offset from the document top.

If your positioned element is a child of more than one scrollable element then you will need to account for those, but the basic math is the same.

As a side note, an example of the markup you are trying to use would help get more exact answers.

Rozwel
  • 1,990
  • 2
  • 20
  • 30
0

try deleted the position option 

$dialog = $('<div><table width="100%" height="100%"><tr><td height="100%" align="center"><img style="vertical-align:middle"  src="css/images/ajax-loader.gif"></td></tr></table></div>')
        .html(msj)
        .dialog({
            title:"Validacion del ingreso.",
            width:350, 
            height:200, 
            modal:true,
            draggable:true,
            buttons: {
                                "Aceptar": function()
                                {
                                        $(this).dialog("close");
                                        $(this).dialog("destroy");

                                }
            }
        });
KristKing
  • 49
  • 3