web-dev-qa-db-fra.com

Dans la boîte de dialogue jquery UI, 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 utilisant la boîte de dialogue jquery UI. Je veux maintenant faire apparaître une autre boîte de dialogue lorsque l'utilisateur modifie un champ dans la première boîte de dialogue. Les deux devraient être modaux.

Est-ce possible car j'ai essayé de mettre ce code là et rien ne semble surgir. Le code suivant fonctionne correctement lorsque vous cliquez sur une page standard (où le contrôle de sélection avec l'ID: selectDropdownThatICanChange), mais si le même contrôle de sélection que je modifie est lui-même une boîte de dialogue, la ligne de boîte de dialogue ("Ouvrir") ne fait rien. L'événement change se déclenche et la méthode open est appelée 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 le dialogue (qui est juste un div)

<div id="secondModalDialog" style="display:none">
      This is a test <br/> This is  atest
</div>
jqueryjquery-uimodal-dialogjquery-ui-dialog
14
leora

Les boîtes de dialogue de l'interface utilisateur ne sont pas uniques. Vous pouvez ouvrir autant de boîtes de dialogue que vous le souhaitez. Et par défaut, ils sont empilés. mais lorsque Dialog se concentre, il arrive devant d'autres dialogues.

voici le violon que j'ai créé pour vous. Ouvrir la boîte de dialogue depuis 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 la liste déroulante sur la première boîte de dialogue et sur l'événement de changement, j'ai ouvert une autre boîte de dialogue au-dessus de la première boîte de dialogue.

30
Zahid Riaz

Vous pouvez ouvrir n'importe quel nombre de modaux et le comportement par défaut est d'empiler dans l'ordre où ils ont été ouverts.

Démo: 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
MLM

Je voulais juste informer les futurs chercheurs. Il est possible d'utiliser z-index pour placer un modalWidget sur un autre. J'utilise jquery ui 1.10.3.

La façon dont vous procédez est de donner à votre constructeur de dialogue une classe de dialogue.

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

Ensuite, dans votre CSS, vous spécifiez un z-index supérieur à celui utilisé dans la première boîte de dialogue.

.ModalWindowDisplayMeOnTopPlease {
    z-index: 100;
}

Vous devrez peut-être vérifier lequel utilise Firebug ou un outil de développement pour vérifier avec quel z-index il a été instancié. Mon z-index par défaut était de 90 sur le premier widget modal. Le code de la fenêtre ressemblait à 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>
2
phil

Comme sushanth reddy indiqué dans les commentaires, définissez 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

0
Royce Feng