如何在关闭时重置引导模式并再次打开它?

IT技术 javascript jquery html twitter-bootstrap
2021-02-13 00:18:03

我在引导模式中有一个列表框和一个按钮。当按钮被单击时,一个新按钮会在模态的 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>
6个回答

模式隐藏时,只需手动重置任何内容:

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

还有更多的事件。更多关于他们在这里

$(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>

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

尝试过并且运行良好

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

reset 是dom内置功能,你也可以使用 $(this).find('form')[0].reset();

Bootstrap 的模态类公开了一些用于连接模态功能的事件,详情请见此处

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

hidden.bs.modal 当模态完成对用户隐藏时会触发此事件(将等待 CSS 转换完成)​​。

这是正确答案。其他解决方案,如添加/删除模态,或弄乱模态的 html 内容只是黑客。
2021-04-08 00:18:03

对我有帮助的是将以下行放在就绪函数中:

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

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

    ...
    ..
});

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

我希望这也能帮助你!

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

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

var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
    $('#myModal').remove();
    var myClone = originalModal.clone();
    $('body').append(myClone);
});
此解决方案适用于对模态内容或布局进行的任何类型的修改:CSS 类、样式、尺寸等。+1 的想法!
2021-04-14 00:18:03

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

$(".modal-body input").val("")
+ 如果你有(我有) input.btn.btn-primary(type='submit', value='Save') 那么它也会清除按钮的值,所以不再显示按钮的名称。我为每个输入添加了 id 并为每个输入添加了这个脚本行,脚本示例: $("#firstInput").val('');
2021-03-21 00:18:03
可行,但是如果有输入+选择+文本区域,我们必须清除所有人
2021-03-28 00:18:03