Invocar janela modal dentro de outra janela modal

[JRRC 0]

Olá a todos, boa tarde.

Pessoal, gostaria de saber como que faço para chamar uma janela modal dentro de uma outra.

Para chamar minha primeira janela modal clico em um checkbox, então a primeira janela é chamada.

 

Código que HTML utilizado para chamas as janelas modais.

// Checkbox que clico para invocar a primeira janela modal
<div class="contentSouces">
    <input type="checkbox" name="filtersOptional" id="filtersOptional" class="dialog_chk" /> 
</div>

Código em Jquery que utilizo pra invocar a janela modal

 

function modalWindow(){
    // Dialog
    $(".dialog").dialog({
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
 
    // Dialog Link
    $(".dialog_chk").click(function(){
        $(".dialog").dialog("close");
        var id_chk = $(this).attr("id");
        $("#chk_" + id_chk).dialog("open");
 
        return false;
    });
}
modalWindow();

 

Janela modal que é invocada

 

// Janela modal que é apresentada após clicar no checkbox @id=filtersOptional
<div title="Add your Filters and/or Optional your query" id="chk_filters"  class="dialog">
    // Quando eu clicasse nesse outro checkbox (@id=optional_modal) gostaria que outra janela modal fosse invocada.
    <input type="checkbox" name="optional_modal" id="optional_modal" class="dialog_chk"/>
    
    <input type="checkbox" name="filters_modal" id="filters_modal"/> 
</div>

 

Código em HTML da segunda janela modal que eu gostaria que fosse invocada

 

// Janela modal que é apresentada após clicar no checkbox @id=filtersOptional
<div title="Add your Filters and/or Optional your query" id="chk_filters"  class="dialog">
    // Quando eu clicasse nesse outro checkbox (@id=optional_modal) gostaria que outra janela modal fosse invocada.
    <input type="checkbox" name="optional_modal" id="optional_modal" class="dialog_chk"/>
    
    <input type="checkbox" name="filters_modal" id="filters_modal"/> 
</div>

 

Código em Jquery que utilizo pra invocar a segunda janela modal

 

$("input[id=optional_modal]").removeAttr("checked")
$("input[id=optional_modal]").click(function(){
    $("input[id=optional_modal]").attr("checked", true);
    if ($("input[id=optional_modal]").is(":checked")){
        modalWindow();
    }
});

 

No entanto, da maneira que meu código se apresenta, quando mando invocar a segunda janela modal o que acontece é que a primeira é sobrescrita pela segunda.

Alguém poderia me dar uma dica sobre o que devo fazer pra contornar esse problema?

Desde de já obrigado pela ajuda de todos

 

[aldan 0]

Companheiro teu post já está um pouco antigo mas estou com esta dificuldade, você conseguiu uma solução para este post?

 

Desde já agradeço.