Создание нескольких пользовательских диалогов с различными формами с использованием библиотеки Alterifyjs

Question

У меня есть 6 кнопок на странице. При нажатии на каждую кнопку мне нужно показать диалоговое окно, где пользователь может заполнить небольшую форму. Я пытаюсь обработать все формы с помощью одного настраиваемого диалогового окна, используя диалоговое окно в одноэлементном режиме, поскольку одновременно можно открыть только одну форму. Когда пользователю необходимо открыть вторую форму, текущий диалог должен быть закрыт, а затем он может открыть следующую форму. Я могу просто использовать один и тот же диалог, чтобы показать различное содержимое. Однако, когда я открываю вторую форму, div, содержащий предыдущую форму, заменяется новой формой. Как я могу сохранить элемент div, содержащий мою предыдущую форму, от удаления со страницы при открытии другой формы? Я заметил, что все элементы alterifyjs находятся внизу страницы. Нужно ли использовать собственную логику, чтобы сохранить содержимое в отдельном месте до загрузки второй формы?

HTML-страница выглядит примерно так:

<div id="form1" style="display: none">
    <label>Field 1:</label>
    <input type="text" id="f1">
    <label>field 2:</label>
    <input type="text" id="f2">
</div>
<div id="form2" style="display: none">
    <label>Field 3:</label>
    <input type="text" id="f3">
    <label>field 4:</label>
    <input type="text" id="f4">
</div>
<div id="form3" style="display: none">
    <label>Field 5:</label>
    <input type="text" id="f5">
    <label>field 6:</label>
    <input type="text" id="f6">
</div>
<div id="form4" style="display: none">
    <label>Field 7:</label>
    <input type="text" id="f7">
    <label>field 8:</label>
    <input type="text" id="f8">
</div>

Мой JS чем-то напоминает:

alertify.dialog('customModal',function factory(){
    return{
        main:function(content){
            this.setContent(content);
        },
        setup:function(){
            return {
                options:{
                    basic:false,
                    maximizable:false,
                    resizable:false,
                    padding:false,
                    closableByDimmer:false,
                    title:'My custom dialog'
                }
            };
        }
    };
});

//Tying up form with the buttons
$("body").on("click","#btn1",function(){

    alertify.customModal($('#form1')[0]).set('title','Form 1');
    $('#form1').show();
});

$("body").on("click","#btn2",function(){

    alertify.customModal($('#form2')[0]).set('title','Form 2');
    $('#form2').show();
});

$("body").on("click","#btn3",function(){

    alertify.customModal($('#form3')[0]).set('title','Form 3');
    $('#form3').show();
});

$("body").on("click","#btn4",function(){

    alertify.customModal($('#form4')[0]).set('title','Form 4');
    $('#form4').show();
});

Ссылка Jsfiddle: https://jsfiddle.net/tu3mq98x/

Обратите внимание, что когда мы нажимаем Btn1, а затем Btn2, содержимое Form1 заменяется на Form2. В результате, когда мы снова нажимаем на Btn1 (после нажатия на Btn2), мы получаем From2 вместо Form1. Как я могу это исправить? Пожалуйста, дайте мне знать, если есть лучший подход для этого.

Answer 1

Поскольку содержимое заменяется, вам просто нужно сохранить ссылку на каждый узел формы и повторно использовать его при следующем открытии.

Что-то вроде:

var form1
$("body").on("click","#btn1",function(){
    form1 = form1 || $('#form1').show()[0]
    alertify.customModal(form1).set('title','Form 1');
});

Смотрите обновленную скрипку.