javascript - 使用 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');
});

参见 updated fiddle .