首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Bootstrap模式在关闭和重新打开时触发两次

是因为Bootstrap模态框的默认行为是在每次关闭时都会将模态框从DOM中移除,而重新打开时会重新创建一个新的模态框实例。这种行为可以通过设置data-backdropdata-keyboard属性来改变。

  • data-backdrop属性用于控制点击模态框外部区域是否关闭模态框。默认情况下,该属性值为true,表示点击模态框外部区域会关闭模态框。如果将该属性值设置为static,则点击模态框外部区域不会关闭模态框。
  • data-keyboard属性用于控制按下ESC键是否关闭模态框。默认情况下,该属性值为true,表示按下ESC键会关闭模态框。如果将该属性值设置为false,则按下ESC键不会关闭模态框。

在实际开发中,如果希望在关闭模态框时不移除模态框的DOM,可以通过监听hidden.bs.modal事件来实现。示例代码如下:

代码语言:txt
复制
<div class="modal" id="myModal" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框内容 -->
    </div>
  </div>
</div>

<script>
  $('#myModal').on('hidden.bs.modal', function (e) {
    // 在模态框关闭时执行的操作
    // 可以在这里重置模态框的内容等
  })
</script>

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云云数据库MySQL版(CDB for MySQL),腾讯云对象存储(COS),腾讯云内容分发网络(CDN)。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

31分41秒

【玩转 WordPress】腾讯云serverless搭建WordPress个人博经验分享

领券