关闭后引导模式刷新

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

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

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

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

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

更新：

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