Могу ли я сделать положение диалога jquery независимым от размера окна? - PullRequest
Новая
       4

Могу ли я сделать положение диалога jquery независимым от размера окна?

2 голосов
/ 13 декабря 2011

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

$('#red').dialog({autoOpen: false, resizable: false, draggable: false, 
    height: 600, width:550, position: [10, 150]});

Я считаю, что если окно браузера слишком маленькое, диалоговое окно не появляется в (10,150), но выше.

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

Ответы [ 3 ]

1 голос
/ 13 декабря 2011

Похоже, что диалоговый виджет пытается сохранить диалог видимым и переопределяет настройку position в процессе.Вы можете использовать событие open, чтобы вызвать проблему.Структура диалога (без ненужных классов и тому подобного) выглядит следующим образом: 

<div class="ui-dialog">
    <div class="ui-dialog-titlebar"></div>
    <div id="red"></div>
</div>

, поэтому вы можете использовать обработчик open следующим образом: 

open: function(event, ui) {
    var $dialog  = $(event.target);
    var position = $dialog.dialog('option', 'position');
    $dialog.closest('.ui-dialog').css({
        left: position[0],
        top:  position[1]
    });
}

Да, это такнемного глупо, но это работает, и я не вижу в API ничего, что позволяло бы контролировать поведение диалога, когда оно не помещается в видимую область.

Демо: http://jsfiddle.net/ambiguous/L9Deb/

0 голосов
/ 13 декабря 2011

если вы используете CSS, вы можете достичь этого: 

#red{position: absolute; top: 150px; left: 10px;}

Позиционирование CSS выполняется в соответствии с окном браузера.

В вашем коде сначала нужно получить смещение через jquery, используя $ (this) .offset. Если у вас есть смещение, вы можете назначить смещение + позицию в позиции: [10,150] part.

Для этой цели лучше использовать CSS. Просто откройте диалоговое окно с помощью плагина, а об остальном можно позаботиться через css.

Надеюсь, это поможет.

-Veno

0 голосов
/ 13 декабря 2011 
 $(window).height();
 $(window).width();

используйте вышеуказанные свойства jquery. Это даст вам размер окна, и вы можете отрегулировать положение вашего всплывающего окна в соответствии с этим.

А также прочитайте следующую ссылку, которая также будет полезна.

разрешение экрана

высота и ширина окон

...