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中删除"hidden.bs.modal"。因此，下次单击“添加新值”按钮时，不会显示#content因为它不再存在。

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

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

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

<强>更新

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

关闭后Bootstrap模态刷新

1 个答案: