如何在bootstrap模态框弹出后触发函数

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

事件类型 描述

show.bs.modal show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的 元素,则此元素可以通过事件的relatedTarget 属性进行访问。
shown.bs.modal 此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触 发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件 的 relatedTarget 属性进行访问。
hide.bs.modal hide 方法调用之后立即触发该事件。
hidden.bs.modal 此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。
loaded.bs.modal 从远端的数据源加载完数据之后触发该事件。

JS代码:
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这是一个基于Bootstrap 4的模态框弹出效果的示例代码: HTML代码: ```html <!-- 模态框弹出按钮 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 弹出模态框 </button> <!-- 模态框弹出窗口 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="myModalLabel">模态框标题</h5> <button type="button" class="close" data-dismiss="modal" aria-label="关闭"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>这里是模态框的内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> ``` CSS代码: ```css /* 设置模态框弹出窗口的样式 */ .modal-dialog { max-width: 600px; } /* 设置模态框标题的样式 */ .modal-header { background-color: #007bff; color: #fff; } /* 设置模态框关闭按钮的样式 */ .modal-header .close { color: #fff; } /* 设置模态框保存按钮的样式 */ .modal-footer .btn-primary { background-color: #007bff; border-color: #007bff; } /* 设置模态框关闭按钮和保存按钮之间的间距 */ .modal-footer .btn-secondary { margin-right: 10px; } ``` JavaScript代码: ```javascript // 初始化模态框 $('#myModal').modal({ backdrop: 'static', keyboard: false, show: false }); ``` 这段代码中,我们使用了Bootstrap 4的模态框组件来实现弹出效果。我们首先创建了一个按钮,设置了data-toggle和data-target属性,这两个属性用于触发模态框弹出。然后,我们创建了一个模态框弹出窗口,设置了id属性和aria-labelledby属性,这两个属性用于指定模态框的唯一标识和标题。在模态框弹出窗口中,我们分别创建了模态框的标题、内容和底部按钮。最后,我们使用JavaScript代码来初始化模态框,设置了backdrop、keyboard和show属性,这些属性用于控制模态框的行为。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值