Bootstrap Модальное обновление после закрытия

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 из DOM целиком, используя эту строку $(this).find("#content").remove(); внутри события "hidden.bs.modal". Поэтому в следующий раз, когда вы нажмете кнопку «Добавить новое значение», нет #content, чтобы показать, потому что больше не существует.

Сначала удалите эту строку $(this).find("#content").remove();.

Во-вторых, добавьте приведенный ниже код, чтобы переключать текстовые поля, когда вы нажимаете кнопку «Отмена». Пусть модальности «x» (close icon) выполняют свою работу, иначе не было бы способа фактически закрыть модальность, если пользователь нуждается.

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

Update:

Чтобы скрыть Textboxes & кнопки на модальном близко, все, что вам нужно, это просто добавить строку $("#content").hide(); внутри $(document).on("hidden.bs.modal", события. Это только для того, чтобы скрыть 2 текстовых поля, так как есть код, который вы уже написали, чтобы скрыть кнопки.