如何在关闭时重置引导模式并再次打开它? [英] How to reset the bootstrap modal when it gets closed and open it fresh again?

查看：30
本文介绍了如何在关闭时重置引导模式并再次打开它?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<div class="modal-body"><button type="button" class="btn" data-dismiss="modal">关闭</button><button type="button" class="btn" id="submit_form">提交</button><div class="modal-body1"><div id="placeholder-div1"></div>

<div class="modal-footer"><脚本>$("#submit_form").on("click", function () {$(".modal-body1").html("<h3>test</h3>");});<脚本>$(函数(){$(".modal-footer").click(function () {$(".modal").modal("隐藏");});});

-- 更新 ---

为什么这不起作用?

解决方案

当模态隐藏时只需手动重置任何内容:

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

还有更多活动.关于它们的更多信息这里

$(document).ready(function() {$(".modal").on("hidden.bs.modal", function() {$(".modal-body1").html("他去哪儿了?！?！?！");});});

<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">启动模式<div class="modalfade" 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">关闭</span><h4 class="modal-title" id="myModalLabel">模态标题</h4>

<div class="modal-body">

<h3>关闭再打开，我就走了！</h3>

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

I have a list box in the bootstrap modal and a button. When the button is clicked a new button gets rendered inside a div in the modal. When I close the modal and reopen it, the last operation performed on the modal like the button rendered earlier is still present in the modal.

How do reset the modal so that when the modal is opened again, the button is not present and user can again select the option from the list box and click on the button to render a new button and so on.

<!-- 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>

-- Update ---

Why doesn't this work?

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

解决方案

Just reset any content manually when modal is hidden:

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

There is more events. More about them 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>

这篇关于如何在关闭时重置引导模式并再次打开它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆