it-swarm.com.ru

Как центрировать модальное диалоговое окно в прокручиваемом окне с абсолютной позицией?

Я пытаюсь центрировать модальное диалоговое окно в прокручиваемом окне. Этот мод является абсолютным положением, потому что должен быть перетаскиваемым на экране. Я использую этот плагин для перетаскиваемой функции:

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

Моя проблема в том, что этот модал имеет абсолютную позицию, если я поставлю верх: 50% он отображает модал в центральном окне, но не учитывая все прокручиваемое окно.

7
paganotti

Вы должны использовать

position:fixed

вместо абсолютного/относительного.

position: fixed Элемент расположен относительно окна браузера.

Используйте это, и у вас не должно возникнуть никаких проблем из-за прокрутки.

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

Вы также можете увидеть эти темы:

фиксированное позиционирование без прокрутки

Как разместить центр div окна после прокрутки

12
gotqn

Таким образом, ваш диалог имеет абсолютную позицию и является непосредственным потомком документа/тела, верно!

Центрирование подсказанного модала с абсолютной позицией:

// 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));
11
Stphane

Если он находится внутри прокручиваемого div, убедитесь, что что исходный div: <div style="position:relative;">.

Таким образом, div внутри него, который абсолютный, останется в его пределах и будет использовать его родительский относительный div в качестве контрольной точки для top:50%;

1
Mark Pieszak - DevHelp.Online

В общем, чтобы найти центр области просмотра с полосами прокрутки. Возьмите высоту окна, разделенную на 2, плюс верхнюю часть Результатом является количество пикселей, которое должно быть смещено относительно верхней части документа.

Если позиционируемый элемент является дочерним по отношению к нескольким прокручиваемым элементам, вам необходимо учитывать их, но основная математика остается той же.

Как примечание, пример разметки, которую вы пытаетесь использовать, поможет получить более точные ответы.

1
Rozwel

попробуйте удалить опцию позиции

$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");

                                }
            }
        });
0
KristKing