Alterifyjsライブラリを使用して異なるフォームを持つ複数のカスタムダイアログを作成する

Question

ページに6つのボタンがあります。それぞれのボタンをクリックすると、ユーザーが小さなフォームに記入できるダイアログボックスを表示する必要があります。私は一度に1つのフォームしか開くことができないので、シングルトンモードでダイアログを使うことで、ただ1つのカスタムダイアログですべてのフォームを処理しようとしています。ユーザーが2番目のフォームを開く必要がある場合、現在のダイアログを閉じてから次のフォームを開くことができます。同じダイアログを使ってさまざまな内容を表示するだけでいいです。 しかし、2番目のフォームを開くと、前のフォームを保持するdivが新しいフォームに置き換えられます。別のフォームを開いたときに以前のフォームを含むdivをページから削除しないようにするにはどうすればよいですか？ 私は、すべてのalterifyjs要素がページの最後に保持されていることに気付きました。 2番目のフォームが読み込まれる前に別の場所に内容を保存するために、独自のロジックを使用する必要がありますか？

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リンク：私たちはBTN1、その後BTN2をクリックし、ことを https://jsfiddle.net/tu3mq98x/

お知らせ、 Form1の内容はForm2に置き換えられます。その結果、Btn1を再度クリックすると（Btn2をクリックした後）、Form1ではなくFrom2が表示されます。どうすれば修正できますか？これにはよりよいアプローチがあるかどうか教えてください。

Answer 1

内容が置換されるので、各フォームノードの参照を保存して、次に開くときに再利用するだけです。以下のような

何か：

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

はupdated fiddleを参照してください。