Les boîtes de dialogue modales Jquery UI

J'ai un problème avec Jquery UI boîtes de dialogue modales. J'ai de dialogue modale (dialogA), ce qui peut créer une autre boîte de dialogue modale (dialogB). Après la seconde création et la fermeture de la dialogB la superposition de dialogA disparaître.

Voici mon code:

<!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

Étapes pour reproduire:
1. créer une boîte de dialogue (dialogue) en cliquant sur le bouton
2. créer une boîte de dialogue (dialogA) en cliquant sur le bouton "créer" à l'intérieur de la première boîte de dialogue
3. fermer dialogA
4. répétez les étapes 2-3
5. la superposition de la première boîte de dialogue a été disparu

Grâce

Difinitely ressemble à un bug, la superposition détruit si vous créez une boîte de dialogue modale, deux fois pour le même z-index. Pouvez-vous incrément de z-index manuellement? Comme alternative, vous pouvez faire de superposition modale vous-même via des plugins par exemple flowplayer.org/tools/demos/overlay/modal-dialog.html

OriginalL'auteur Ivan Butsyrin | 2010-04-14

  1. 2

    C'est ce que je suis venu avec, puisque c'est évidemment un problème avec la boîte de dialogue modale, je peut vous présenter avec un "hack" qui va travailler, mais je pense que la raison pour laquelle il bousille est le fait que lorsque vous créez une boîte de dialogue modale, il ajoute le 

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

    au-dessus de la boîte de dialogue div, et puisque vous êtes ajoutant toutes les boîtes de dialogue directement sur le corps, il se confond ceux qui doit fermer après un certain temps (ce n'est que mon hypothèse, que je ne devrais vraiment pas faire) 🙂

    Solution de contournement consiste à vérifier le nombre de boîtes de dialogue et le nombre de superpositions de tous les temps CreateDIalog est appelé, et si elles ne correspondent pas, vous insérez manuellement un nouveau revêtement, ce qui permettra de se débarrasser de votre problème. Une chose est que, depuis cette superposition a été ajouté manuellement, dialogue ne sait pas qu'il a besoin de la cacher, de sorte que lorsque vous êtes de retour à une seule boîte de dialogue, et vous la fermez, l'écran de superposition des séjours. Qui doit être caché à la main.

    Je sais que ce n'est pas la meilleure solution, mais c'est une solution de contournement et il a travaillé pour moi, j'espère que vous pouvez l'utiliser jusqu'à ce que quelqu'un arrive avec une meilleure solution.

    voici le code:

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

    J'ai ajouté le vérifier pour les dialogues et les superpositions:

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

    qui prend soin de l'ajout d'une superposition cas de besoin, et j'ai ajouté une fonction pour mettre à zéro la superposition lorsque vous en avez le plus besoin

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

    qui est appelé dans la section étroite de la boîte de dialogue script

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

    Je n'ai pas eu la chance de le tester à fond, mais il pourrait être un début si rien d'autre..

    bonne chance

    Merci. Il fonctionne très bien.

    OriginalL'auteur drusnov

  2. 3

    Ce problème a été soulevé que le bug et fermé. La dernière version de jQuery UI (1.8.10) permettrait de résoudre ce problème. Veuillez vérifier cette billet pour plus de détails.

    OriginalL'auteur Karthik