Центрирование диалогового окна UQuery UI

С кем-либо сталкивался с этим раньше - у меня есть диалоговое окно JQuery UI, которое идеально сосредоточено в FF, а также IE, но застряло слева в Chrome!Центрирование диалогового окна UQuery UI

Код довольно стандартный. Тем не менее, я копирую его ниже:

<script> 
$(function() {$('#dialog1 ').dialog({autoOpen: false, 
width: 700, height: 400, buttons: { 
         "Ok": function() { 
          $(this).dialog("close"); 
          }, 
         "Cancel": function() { 
          $(this).dialog("close"); 
          } 
         } 
        }); 
     }); 
</script> 

<div id="dialog1">Hello</div>

Он открыт с помощью $("dialog1").dialog("open") при нажатии кнопки

источник

2011-01-21 Kshitij Saxena -KJ-

У меня возникло бы желание уговорить его конкретно в обратном вызове. С «position: absolute, left: 50%; margin-left: -350px' –

Да У меня есть эта точная проблема, и я также заинтересован в решении. – Vadim

Если добавить к вашей таблице стилей он должен решить вашу проблему:

.ui-dialog { margin:0 auto; }

источник

2011-01-21 15:22:47 mVChr

Это сработало! Почему это исключено из CSS? Сообщается об ошибке? –

Я не знаю, я не использую и не использую jQuery UI по сравнению с jQuery Tools ... так что на вас лежит ответственность за отчетность! :) – mVChr

I решил это, связав событие windowresize.

var $dialog = $("#dialog"); 
$dialog.dialog(); 

$(window).resize(function(e){ 
    var $w = $(this), 
     $d = $dialog.parent(), 
     x = $w.width()/2-($d.width()/2), 
     y = $w.height()/2-($d.height()/2); 
    $dialog.dialog('option', 'position', [x, y]); 
});

Проверьте это demo on jSfiddle.

источник

2011-01-21 15:37:24 mekwall

Последняя JQuery-UI загрузки имеет этот стиль диалога

.ui-dialog 
{ 
    position: absolute; 
    padding: .2em; 
    width: 300px; 
    overflow: hidden; 
}

Это определенно работает в хроме. Я думаю, что более старая версия имела position: relative, так что может быть ваша проблема

источник

2011-01-21 15:55:08 Vadim

Я использую самую последнюю версию - 1.8.9. Chrome просто отказывается от центра диалога :( –

Проверьте решение mVchr. Он отлично работает. –

@crimson yes Решение mVchr работает отлично, но когда я изменил свой CSS, чтобы использовать абсолютный позиционирование, которое также фиксировало его. Странно. – Vadim

Я загрузил тему гладкости для 1.8.9 две ночи назад и имел ту же проблему. Решение Margin css работает для меня. Я загружаю дополнительные правила стиля после темы, чтобы переопределить некоторые настройки темы. Не знаю, почему он отсутствует, хотя ...

источник

2011-02-21 02:02:18 Jesse

Если у кого-то есть эта проблема в IE, но не на Chrome или FF, попробуйте добавить некоторый тип doctype на страницу. Это сработало для меня:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

источник

2013-05-13 22:13:10 ducke1942

Центрирование диалогового окна UQuery UI

ответ

Смежные вопросы