2

我在一个页面上有 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。我该如何纠正？请让我知道是否有更好的方法。

4

1 回答 1

0

由于内容被替换，您只需要保存每个表单节点的引用并在下次打开时重新使用它。

就像是：

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

请参阅更新的小提琴。

于 2017-08-08T18:50:19.557 回答