jQuery - диалоги исчезают при закрытии / уничтожении - PullRequest
Новая
       38

jQuery - диалоги исчезают при закрытии / уничтожении

1 голос
/ 20 июля 2011

Я создаю приложение, которое широко использует JQuery UI Dialogs. Я столкнулся с проблемой, которая возникает при открытии нескольких диалогов одновременно, и я не могу понять, как это исправить, если это вообще возможно.

По сути, это выглядит так:

  • Пользователь открывает диалоговое окно A (верх: 100px, высота: 300px)
  • Пользователь открывает диалог B (верх: 100 пикселей, высота: 300 пикселей)
  • Пользователь закрывает диалог A
  • Все диалоговые окна открываются после сдвига вверх A. например: диалоговое окно B top свойство субстратов диалоговое окно A height (100px - 300px = -200px): диалоговые окна исчезают.

Я пришел к такому выводу, используя Firebug Inspect и Web Developer.

Если диалоговое окно B (открытое после диалогового окна A) сначала закрывается, проблема не возникает. Я также пытался использовать vanilla UI (т. Е. Нет таблиц стилей, кроме загруженных jQuery), и это все еще происходит. Кажется, при закрытии диалогового окна возникает триггер, который я не могу переопределить.

Использование position: fixed; (как предлагает @TheVillageIdiot ) исправляет его, но все равно происходит, когда диалоговое окно уничтожено.

Вот пример: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>

    <link type="text/css" rel="stylesheet" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

</head>
<body>

<div id="dialog-1">

</div>
<div id="dialog-2">

</div>

<script type="text/javascript">
$('#dialog-1').dialog({
    close: function() {
        $(this).dialog('destroy');      
    },
    height: 300,
    position: [100, 100],  
    show: 'scale',
    hide: 'drop',
    resizable: false,
    title: 'A',
});

$('#dialog-2').dialog({
    close: function() {
        $(this).dialog('destroy');      
    },
    height: 300,
    position: [100, 100],
    show: 'scale',
    hide: 'drop',
    resizable: false,
    title: 'B',
});
</script>

</body>
</html>

Любые предложения приветствуются.

Ответы [ 2 ]

1 голос
/ 21 июля 2011

Вероятно, это потому, что ваши диалоги не находятся в position: absolute, поэтому позиция (то есть верх: X) диалога B вычисляется относительно позиции (верх: Y) диалога A.

Итак, допустим, что абсолютная позиция диалога B равна top: 20px, а диалог A равен top: 10px, назначенная позиция CSS для диалога B будет top: 10px, поскольку она относительно диалога A,Поэтому, когда диалоговое окно A уничтожено, позиция диалогового окна B (top: 10px) становится относительно элемента, который был до диалогового окна A, скорее всего, выше, и, следовательно, идет вверх в вашем окне.

Решение довольно простое: установите атрибут CSS position вашего диалогового окна на absolute.Пользовательский интерфейс jQuery должен догнать и правильно рассчитать позиции.

PS: Просто убедитесь, что вы определили абсолютную позицию CSS после загрузки таблицы стилей CSS jQuery UI, чтобы убедиться, что ваши переопределяют jQuery.

0 голосов
/ 20 июля 2011

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

В качестве альтернативы, есть несколько виджетов уведомлений, которые довольно хорошо справляются с такой задачей.Например:

http://www.erichynds.com/examples/jquery-notify/

http://www.thinkbohemian.com/2010/04/22/stack-overflow-style-notifications-using-jquery/

Хорошо, как говорится, я делал это несколько раз, особенно когда я предупреждаю пользователя о том, чтопроцесс происходит, а затем сообщает им, что процесс завершился успешно / не удалось.Вместо того, чтобы подбрасывать обоих и уничтожать одного, решение состояло в том, чтобы бросить одного, уничтожить его, а затем последовательно создать другие экземпляры.Это можно сделать с помощью нажатия кнопки в самом коде диалогового окна jQuery для примеров, где вам нужно взаимодействие с пользователем, или это можно сделать автоматически с помощью серверного скрипта, который «говорит» пользовательскому интерфейсу уничтожить один и построить другой при уведомлении о процессе.,В любом случае, создание сценария, предназначенного для создания одного элемента несколько раз, а затем ожидание его «стека» приводит к появлению ошибок со всеми проблемами браузера (кашель, кашель IE).

...