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。

使用Alterifyjs库创建具有不同表单的多个自定义对话框

1 个答案: