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

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

Вот мой код:

<!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. закрыть dialogA
4. повторить шаги 2-3
5. Наложения первого диалога было исчезло

Благодаря

источник

2010-04-14 Ivan Butsyrin

Difinitely выглядит как ошибка, наложение уничтожает, если вы создаете модальный диалог дважды для того же z-индекса. Можете ли вы увеличить z-index вручную? В качестве альтернативы вы можете сделать омоложение на основе мода через некоторые плагины, например http://flowplayer.org/tools/demos/overlay/modal-dialog.html –

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

<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(); 
      }

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

удачи

источник

2010-04-15 17:29:47 drusnov

Спасибо. Он работает нормально. –

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

источник

2011-03-15 12:43:10 Karthik

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

ответ

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