如何在引导模式关闭并重新打开时重置引导模式？答案

【问题标题】：How to reset the bootstrap modal when it gets closed and open it fresh again?如何在引导模式关闭并重新打开时重置引导模式？
【发布时间】：2014-11-11 10:45:45
【问题描述】：

我在引导模式中有一个列表框和一个按钮。单击按钮时，会在模态的 div 内呈现一个新按钮。当我关闭模态并重新打开它时，对模态执行的最后一个操作（如之前呈现的按钮）仍然存在于模态中。

如何重置模态，以便在再次打开模态时，按钮不存在，用户可以再次从列表框中选择选项并单击按钮以呈现新按钮等。

<!-- Modal -->
<div
  class="modal fade"
  id="myModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span
          ><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Select Language</h4>
      </div>
      <div class="modal-body">
        <button type="button" class="btn" data-dismiss="modal">Close</button>
        <button type="button" class="btn" id="submit_form">Submit</button>

        <div class="modal-body1">
          <div id="placeholder-div1"></div>
        </div>
      </div>

      <div class="modal-footer">
        <script>
          $("#submit_form").on("click", function () {
            $(".modal-body1").html("<h3>test</h3>");
          });
        </script>

        <script>
          $(function () {
            $(".modal-footer").click(function () {
              $(".modal").modal("hide");
            });
          });
        </script>
      </div>
    </div>
  </div>
</div>

——更新——

为什么这不起作用？

<script type="text/javascript">
  $(function () {
    $("#myModal").on("hidden.bs.modal", function (e) {
      console.log("Modal hidden");
      $("#placeholder-div1").html("");
    });
  });
</script>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

当模态隐藏时手动重置任何内容：

$(".modal").on("hidden.bs.modal", function(){
    $(".modal-body1").html("");
});

还有更多活动。更多关于他们的信息here

$(document).ready(function() {
  $(".modal").on("hidden.bs.modal", function() {
    $(".modal-body1").html("Where did he go?!?!?!");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class='modal-body1'>
          <h3>Close and open, I will be gone!</h3>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

【讨论】：

开发者工具控制台中没有错误。当我单击关闭按钮或单击外部任何位置时，该函数没有被调用
谢谢。我看到它在这里完美运行。我不知道我的 Rails 应用程序有什么问题。我更改了 jquery 和 bootstrap 版本并复制粘贴了此代码，但它在我的应用程序中不起作用。控制台中没有错误指示。 document.ready 被调用，但 hidden.bs.modal 事件未被捕获。
@yardpenalty 我的回答没有区别，也没有改善。您可以在隐藏的 HTML 中放置任何内容
对不起，我误会了@Justinas。当您有远程模式时，此方法非常有效，因为它清除了远程内容。并且在下一个请求中，它将从远程内容重新加载.modal-body。如果您有清除 .modal-body 的内联模式，这不是一个好主意。我为内联模态所做的工作是在.modal-body 中使用带有hidden 类的切换方法。例如，我有<div class="loading hidden"><span class="caption">Loading...</span><img src="/images/loading.gif" alt="loading"></div>，然后是<div class="context hidden">actual content</div>。顺便说一句
这个解决方案对我不起作用。但是下面的代码对我有用。 $(document).ready(function() { $(".modal").on("hidden.bs.modal", function(){ jQuery(this).data('bs.modal', null); } ); });

【解决方案2】：

试过了，效果很好

$('#MyModal').on('hidden.bs.modal', function () {
    $(this).find('form').trigger('reset');
})

reset是dom内置函数，也可以使用$(this).find('form')[0].reset();

Bootstrap 的模态类公开了一些用于连接模态功能的事件，详情 at here。

hide.bs.modal隐藏实例时立即触发此事件方法已被调用。

hidden.bs.modal 当模态框结束时触发此事件对用户隐藏（将等待 CSS 转换完成）。

【讨论】：

这是正确答案。其他解决方案，例如添加/删除模态框，或弄乱模态框的 html 内容，都只是 hack。

【解决方案3】：

对我有帮助的是，将以下行放在 ready 函数中：

$(document).ready(function()
{
    ..
    ...

    // codes works on all bootstrap modal windows in application
    $('.modal').on('hidden.bs.modal', function(e)
    { 
        $(this).removeData();
    }) ;

    ...
    ..
});

当模态窗口关闭并再次打开时，之前输入和选择的值将被重置为初始值。

我希望这对你也有帮助！

【讨论】：

我有同样的问题，当我使用批准的答案时，所有元素都消失了，而只是数据。这个答案对我帮助很大......
如果模态是远程的（在引导 3 之后不推荐使用，所以我建议将 modal-body 内联），那么您可能需要修改如何重置模态的内容。例如，我有全局 document.ready() 我将这行代码放在那里，但它不会重置我的远程模式。我所做的是使用批准的答案，但我放入了远程模式document.ready()。
这对我不起作用，我该如何找到原因？

【解决方案4】：

尝试克隆，然后在隐藏模式时删除并重新添加元素。这应该保留所有事件，尽管我没有对所有版本的所有内容进行彻底测试。

var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
    $('#myModal').remove();
    var myClone = originalModal.clone();
    $('body').append(myClone);
});

【讨论】：

此解决方案适用于对模态内容或布局进行的任何类型的修改：CSS 类、样式、尺寸等。为这个想法 +1！

【解决方案5】：

要重置模式中的所有输入字段，请使用以下内容。

$(".modal-body input").val("")

【讨论】：

可以用，但是如果有input+select+textarea，我们要清除大家
+ 如果你有（我有） input.btn.btn-primary(type='submit', value='Save') 那么它也会清除按钮的值，所以不会' t 不再显示按钮的名称。我为每个输入添加了 id 并为每个输入添加了这个脚本行，脚本示例：$("#firstInput").val('');

【解决方案6】：

这是另一种解决方案。

如果您要对 DOM 进行大量更改（添加/删除元素和类），可能有几件事需要“重置”。您可以在每次重新打开模式时重置整个模式，而不是在模式关闭时清除每个元素。

示例代码：

(function(){

    var template = null

    $('.modal').on('show.bs.modal', function (event) {
        if (template == null) {
            template = $(this).html()
        } else {
            $(this).html(template)
        }
        // other initialization here, if you want to
    })

})()

您仍然可以在 HTML 中编写您的初始状态，而不必过多担心以后会发生什么。您可以编写 UI JS 代码，而不必担心以后需要清理。每次重新启动模式时，它都会重置为与第一次完全相同的状态。

编辑：这是一个可以处理多个模式的版本（我还没有测试过）...

(function(){

    $('.modal').on('show.bs.modal', function (event) {
        if (!$(this).data('template')) {
            $(this).data('template', $(this).html())
        } else {
            $(this).html($this.data('template'))
        }
        // other initialization here, if you want to
    })

})()

【讨论】：

最灵活的解决方案。

【解决方案7】：

(function(){
        $(".modal").on("hidden.bs.modal", function(){
            $(this).removeData();
        });
});

这是在隐藏/关闭引导模式时移除联系人的完美解决方案。

【讨论】：

在上面给出的所有解决方案中，这个对我有用。谢谢vm！！

【解决方案8】：

这对我来说很准确

let template = null;
    $('.modal').on('show.bs.modal', function(event) {
      template = $(this).html();
    });

    $('.modal').on('hidden.bs.modal', function(e) {
      $(this).html(template);
    });

【讨论】：

当你使用 append 而不是 input.val 时，这对我特别有用。谢谢
@grace 在我的情况下，它也适用于未给出 value 属性的输入。

【解决方案9】：

另外，您可以在打开之前克隆您的模态；）

$('#myModal')
    .clone()
    .modal()
    .on('hidden.bs.modal', function(e) {
        $(this).remove();
    });

【讨论】：

【解决方案10】：

你可以试试这个

$('body').on('hidden.bs.modal', '.modal', function () {
     $(this).removeData('bs.modal');
});

它将从模型中删除所有数据并重置它。

【讨论】：

【解决方案11】：

我使用的是 BS 3.3.7，当我打开一个模态然后关闭它时出现问题，模态内容保留在客户端没有 html("") 根本不清楚。所以我用它来完全删除模态div内的代码。好吧，您可能会问为什么当从另一个模态打开一个模态并关闭第二个模态时，windows 的 chrome 中的 padding-right 代码会保留 17px 的填充权。希望对你有帮助...

$(document)
.on('shown.bs.modal', '.modal', function () { 
    $(document.body).addClass('modal-open') 
})
.on('hidden.bs.modal', '.modal', function () { 
    $(document.body).removeClass('modal-open') 
    $(document.body).css("padding-right", "0px");
 $(this).removeData('bs.modal').find(".modal-dialog").empty();
})

【讨论】：

【解决方案12】：

示例代码：

 $(document).on('hide.bs.modal', '#basicModal', function (e) {
        $('#basicModal').empty();
    });

【讨论】：

【解决方案13】：

以下语句显示了如何在不使用引导程序的情况下打开/重新打开 Modal。

在css中添加两个类

然后使用下面的 jQuery 重新打开关闭的模式。

.hide_block
 {
   display:none  !important;
 }

 .display_block
 {
    display:block !important;
 } 

 $("#Modal").removeClass('hide_block');
 $("#Modal").addClass('display_block');
 $("Modal").show("slow");

对我来说效果很好:)

【讨论】：

【解决方案14】：

使用 BS 3.3.7

$("#yourModal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null); // will clear all element inside modal
});

【讨论】：

【解决方案15】：

/* 这将使用您想在模态中更新的新 HTML 更改 HTML 内容，而无需太多重置... */

var = ""; //HTML to be changed 

$(".classbuttonClicked").click(function() {
    $('#ModalDivToChange').html(var);
    $('#myModal').modal('show');
});

【讨论】：

【解决方案16】：

在模态框内重置表单。示例代码：

$('#myModal').on('hide.bs.modal', '#myModal', function (e) {
    $('#myModal form')[0].reset();
});

【讨论】：

【解决方案17】：

重置表单元素（也适用于 bootstrap 5）。示例代码：

$(document).on("hidden.bs.modal", "#modalid", function () {
  $(this).find('#form')[0].reset();
});

【讨论】：