Jquery UI модальные диалоги - PullRequest
Новая
       40

Jquery UI модальные диалоги

4 голосов
/ 14 апреля 2010

У меня проблема с модальными диалоговыми окнами Jquery UI. У меня есть модальный диалог (dialogA), который может создать еще один модальный диалог (dialogB). После второго создания и закрытия диалогового окна B наложение диалогового окна A исчезнет.

Вот мой код: 

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link type="text/css" rel="Stylesheet" href="ui-lightness/jquery-ui-1.8.custom.css" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript">
        function createDialog(dialogId) {
   $('#' + dialogId).dialog({
    autoOpen: true,
    modal: true,
    buttons: {
     'close': function() {
      $(this).dialog('close');
     },
     'create': function() {
      var newDialogId = dialogId + '1';
      $('body').append('<div id="' + newDialogId + '">' + newDialogId + '</div>');
      createDialog(newDialogId);
     }
    },
    close: function() {
     $(this).dialog('destroy');
     $(this).remove();
    }
   });
  }

  $(document).ready(function() {
   $('#button1').click(function() {
    var dialogId = 'dialog';
    $('body').append('<div id="' + dialogId + '">' + dialogId + '</div>');
    createDialog(dialogId);
   });   
  });
    </script>
</head>
<body>
    <button id="button1">Create dialog</button> 
</body>
</html>

http://jsbin.com/otama

Шаги для воспроизведения:
1. создать диалог (диалог), нажав на кнопку
2. создать еще одно диалоговое окно (dialogA), нажав кнопку «Создать» внутри первого диалогового окна
3. закрыть диалоговое окно A
4. повторите шаги 2-3
5. наложение первого диалога исчезло

Спасибо

Ответы [ 2 ]

3 голосов
/ 15 марта 2011

Эта проблема была поднята как ошибка и закрыта. Последний выпуск jQuery UI (1.8.10) решит эту проблему. Пожалуйста, проверьте этот билет для более подробной информации.

2 голосов
/ 15 апреля 2010

Это то, что я придумал, так как это, очевидно, ошибка в модальном диалоге, я могу представить вам «взлом», который будет работать, но я думаю, что причина, по которой это происходит, заключается в том, что когда вы создать модальный диалог, он добавляет 

<div class="ui-widget-overlay"></div>

над div диалогового окна, и поскольку вы добавляете все диалоговые окна непосредственно к телу, возникает путаница, какие из них нужно закрыть через некоторое время (это только мое предположение, чего я действительно не должен был делать) :)

Обходной путь - проверять количество диалогов и количество наложений каждый раз, когда вызывается CreateDIalog, и, если они не совпадают, вы вручную вставляете новое наложение, которое избавит вас от проблемы. Одна вещь, связанная с этим, заключается в том, что, поскольку это наложение было добавлено вручную, диалоговое окно не знает, что ему нужно его скрывать, поэтому, когда вы возвращаетесь только к одному диалоговому окну и закрываете его, наложение остается. Это также необходимо скрыть вручную.

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

вот код: 

function createDialog(dialogId) {
      $('#' + dialogId).dialog({
        autoOpen: true,
        modal: true,
        buttons: {
          'close': function() {
            $(this).dialog('close');
          },
          'create': function() {
            var newDialogId = dialogId + '1';
            $('body').append('<div id="' + newDialogId + '">' + newDialogId + '</div>');
            createDialog(newDialogId);
          }
        },
        close: function() {
          $(this).dialog('destroy');
          $(this).remove();
          resetOverlays();
        }
      });

      var dialogs = $("div.ui-dialog");
      var overlays = $("div.ui-widget-overlay");
      var overlayStyle = $(overlays[0]).attr("style");

      if(dialogs.length > overlays.length)
      {
        var overlay = $("<div></div>").addClass("ui-widget-overlay").attr("style", overlayStyle).css("z-index", "1001");
        $("body").append(overlay);
      }
    }

    function resetOverlays()
    {
      var dialogs = $("div.ui-dialog");
      if(dialogs.length == 0)
      {
        $(".ui-widget-overlay").remove();
      }
    }

Я добавил проверку на наличие диалогов и наложений: 

      var dialogs = $("div.ui-dialog");
      var overlays = $("div.ui-widget-overlay");
      var overlayStyle = $(overlays[0]).attr("style");

      if(dialogs.length > overlays.length)
      {
        var overlay = $("<div></div>").addClass("ui-widget-overlay").attr("style", overlayStyle).css("z-index", "1001");
        $("body").append(overlay);
      }

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

        function resetOverlays()
        {
          var dialogs = $("div.ui-dialog");
          if(dialogs.length == 0)
          {
            $(".ui-widget-overlay").remove();
          }
        }

, который вызывается в закрытом разделе сценария диалога 

           ,close: function() {
              $(this).dialog('destroy');
              $(this).remove();
              resetOverlays();
            }

У меня не было возможности тщательно его протестировать, но это может быть началом, если ничего больше ..

удачи

...