关闭后引导模态刷新

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("");
    });
});

这是我到目前为止所做的： 演示

我的代码的问题在于，当我关闭模式时，再次单击添加按钮，它将删除该按钮，并且2个文本框和2个按钮不显示。

Answer 1

它删除了按钮，因为您完全是通过使用以下行$(this).find("#content").remove();从DOM中删除#content $(this).find("#content").remove(); 在"hidden.bs.modal"事件中。 因此，下次单击“添加新值”按钮时，将不再显示#content ，因为它不再存在 。

首先删除该行$(this).find("#content").remove(); 。

其次，添加以下代码，以在单击“取消”按钮时切换文本框。 让模态“ x”（关闭图标）执行其工作，否则，如果用户需要，将无法实际关闭模态。

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

更新：

要隐藏模式关闭时的文本框和按钮，您只需要添加$( "#content" ).hide(); 在$(document).on("hidden.bs.modal",事件中。这仅是隐藏2个文本框，因为已经编写了一个代码来隐藏按钮。