ブートストラップ閉じる後のモーダルリフレッシュ

Question

次のことをするボタンがあります：クリックするとモーダルポップアップが開きます。 モーダルポップアップには別のボタンがあり、クリックすると2つのテキストボックスと2つのボタンが表示されます。私が望むのは、閉じるか単に閉じるモーダルをクリックすると、2つのラベルと追加ボタンを含む前の状態にしたいということです。

これらは私のjavascriptのコードです：

//this shows the additional textboxes and buttons   
$("#toggle").click(function() 
{ 
    $("#content").toggle("slow"); 
    $("#divButtons").toggle(); 
    $("#toggle").hide(); 
}); 
//this is where i tried to refresh the modal back to its original state 
$(function() { 
    $(document).on("hidden.bs.modal", "#exampleModal", function() { 
     $(this).find("#content").remove(); // Remove from DOM. 
     $(this).find("#divButtons").remove(); 
     $("#toggle").show(); 
     $(this).find("#portValue").html(""); 
     $(this).find("#hostValue").html(""); 
    }); 
}); 

これは私がこれまでにやっていることです：Demo

私のコードの問題は、私は、モーダルを閉じたときに、クリックしていることです追加ボタンをもう一度押すとボタンが削除され、2つのテキストボックスと2つのボタンは表示されません。

Answer 1

#contentをイベント内でこの行$(this).find("#content").remove();を使用してDOMから完全に削除しているため、ボタンを削除します。したがって、次回に「新しい値を追加」ボタンをクリックすると、が存在しないため、が表示されるため、#contentが表示されません。

まず、その行$(this).find("#content").remove();を削除します。

次に、[キャンセル]ボタンをクリックすると、テキストボックスを切り替えるために、次のコードを追加します。モーダル "x"（クローズアイコン）がその仕事をするならば、ユーザが必要ならモーダルを実際に閉じる方法はありません。

$("#btnCancel").click(function() { 
    $("#content").toggle("slow"); 
    $("#divButtons").toggle(); 
    $("#toggle").show(); 
}); 

更新：

テキストボックスにモーダル近くに&ボタンを非表示にするには、あなたが必要とするすべてがちょうど$(document).on("hidden.bs.modal",イベント内の行$("#content").hide();を追加することです。これは、2つのテキストボックスを隠すためのものです。ボタンを隠すために既に書いたコードがあるからです。