Два диалоговых окна jQuery UI имеют одинаковые значения позиции, но не отображаются друг над другом - PullRequest
Новая
       149

Два диалоговых окна jQuery UI имеют одинаковые значения позиции, но не отображаются друг над другом

2 голосов
/ 03 февраля 2011

У меня есть два диалоговых окна jQuery UI, которые в основном одинаковы.У них одинаковые позиции.Проблема заключается в том, что они отображаются в неправильных позициях в браузере, а не в 200 и 200 сверху и слева от окна просмотра, плюс они не располагаются друг над другом.

Позиция x кажется правильной, но не ихзначения y.

Чего мне не хватает?

См. пример JSFiddle здесь

Добавление: 

<script type="text/javascript">
    $(document).ready(function()
        {
            $( "#one" ).dialog({
                    closeOnEscape: false,
                    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, position: [200,200]
                });

//          $( "#two" ).dialog({
//                  closeOnEscape: false,
//                  open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, position: [200,200]
//          });

        });

  </script>
</head> 
<body> 

<div id="one" style="height: 100px;width: 100px;border: 1px solid red;background-color: #ddd">Hello</div>
<div id="two" style="height: 100px;width: 100px;border: 1px solid red;background-color: #ccc">Hello 2</div>




</body>

Ответы [ 2 ]

0 голосов
/ 03 февраля 2011

Обертывание диалогов с div, который имеет объявленную высоту, кажется, исправляет это. Я не знаю, если это ошибка.

0 голосов
/ 03 февраля 2011

Это связано с position: relative, который устанавливает диалог uid.

http://jsfiddle.net/bJEgR/1/

Поскольку я раньше не работал с этим конкретным плагином, я не уверенЭто хорошая идея или нет, но в качестве доказательства концепции она показывает, что это настройка position: relative.Я использовал Firebug для проверки CSS. 

$( "#one" ).dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close").hide();
        $(".ui-dialog").css('position','absolute');
        $(".ui-dialog").css('top','100px');  
        $(".ui-dialog").css('left','100px');
    },
    position: [200,200]
});
$( "#two" ).dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close").hide();
        $(".ui-dialog").css('position','absolute');
        $(".ui-dialog").css('top','100px');  
        $(".ui-dialog").css('left','100px');
    },
    position: [200,200]
});
...