Dans la boîte de dialogue de l'interface utilisateur de jquery, est-il possible de placer une boîte de dialogue modale au-dessus d'une autre boîte de dialogue modale

J'ai une boîte de dialogue modale à l'aide de jquery UI dialog. Je veux maintenant pour faire apparaître une boîte de dialogue lorsque je les modifications de l'utilisateur un champ dans la première boîte de dialogue. Les deux devraient être modale.

Est-ce possible que j'ai essayé de mettre ce code là et rien ne semble popup. Le code suivant fonctionne très bien lors d'un clic à partir d'une page (lorsque le contrôle de sélection avec l'id: selectDropdownThatICanChange), mais si le même sélectionnez le contrôle que je suis l'évolution est elle-même une boîte de dialogue la boîte de dialogue("Ouvrir") ne fait rien. L'événement de changement de feux et de la méthode ouverte est appelé mais rien ne s'affiche.

$("#secondModalDialog").dialog({
    resizable: false,
    height: 'auto',
    autoOpen: false,
    title: "Warning",
    width: 400,
    modal: true,
    buttons: {
        'Close': function () {
            $("#secondModalDialog").dialog('close');
        }
    }
});


$('#selectDropdownThatICanChange').live("change", function () {
    $("#secondModalDialog").dialog('open');
});

et voici la boîte de dialogue (qui est juste un div)

<div id="secondModalDialog" style="display:none">
      This is a test <br/> This is  atest
</div>

source d'informationauteur leora

  1. 29

    De l'INTERFACE utilisateur les dialogues ne sont pas de singleton, Vous pouvez ouvrir autant de boîtes de dialogue que vous le souhaitez. Et par défaut, ils sont empilés. mais lorsque la boîte de Dialogue obtenir concentré, il est venu en face des autres boîtes de dialogue.

    ici est le violon que j'ai créé pour vous. Ouvrez le dialogue de la première boîte de dialogue

    //HTML:
<div id="dialog-modal" title="Basic modal dialog">
    Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.
    <select id="dialogSelect">
        <option>123</option>
         <option>234</option>       
    </select>
</div>
<div id="another-dialog-modal" title="2nd Modal :O">
    Second Modal yayyay
</div>

//JS:
$( "#dialog-modal" ).dialog({
    height: 300,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});
$("#dialogSelect").change(function(){
    $( "#another-dialog-modal" ).dialog('open');
});
$( "#another-dialog-modal" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

    J'ai mis déroulant sur la première boîte de dialogue, et sur événement de changement, j'ai ouvert une boîte de dialogue au-dessus de la première boîte de dialogue.

  2. 2

    Vous pouvez ouvrir n'importe quel nombre d'auxiliaires modaux et le comportement par défaut consiste à empiler dans l'ordre de leur ouverture.

    Démonstration: jsFiddle

    $('#dialog-modal').dialog({
    height: 300,
    modal: true,
    buttons: {
        'Another Modal': function() {
            $('#another-dialog-modal').dialog('open');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$('#another-dialog-modal').dialog({
    autoOpen: false,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});
  3. 1

    Voulais juste futurs détecteurs de savoir. Il est possible d'utiliser les z-index pour mettre un modalWidget sur l'autre. Je suis à l'aide de jquery ui 1.10.3.

    La façon dont vous aller à ce sujet est, vous donnez à votre constructeur de boîte de dialogue une boîte de dialogue de la classe. 

    $("#secondModalDialog").dialog({
    title: 'Title',
    dialogClass: 'ModalWindowDisplayMeOnTopPlease',
    width: 200,
    height: 200
});

    Puis dans votre CSS, vous spécifiez un z-index supérieur de la première boîte de dialogue de l'aide. 

    .ModalWindowDisplayMeOnTopPlease {
    z-index: 100;
}

    Vous devrez peut-être vérifier une utilisation avec firebug ou certains dev outil pour vérifier les z-index, il a été démontré avec. Par défaut de mon z-index était de 90 sur la première modal Widget. Le code de la fenêtre regardé smthg comme ceci:

    <div id="firstModalDialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 737px;">
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>
  4. 0

    Comme sushanth reddy indiqué dans les commentaires, définir le z-index de la boîte de dialogue:

    $("#secondModalDialog").dialog({
    resizable: false,
    height: 'auto',
    autoOpen: false,
    title: "Warning",
    width: 400,
    modal: true,
    zindex: 1001, //Default is 1000
    buttons: {
        'Close': function () {
            $("#secondModalDialog").dialog('close');
        }
    }
});

    Référence: http://docs.jquery.com/UI/API/1.8/Dialog#option-zIndex