python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件
python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件
上海-悠悠
发布于 2022-01-10 08:28:32
发布于 2022-01-10 08:28:32
文章被收录于专栏：从零开始学自动化测试
前言
Bootstrap 模态框 (modal) 在关闭时，如何触发一些事件?比如重置表单，或者重置表单的校验。 Bootstrap 模态框 (modal) 提供了4个显示和隐藏模态框的事件。这些事件可在函数中当钩子使用。
modal 事件
下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
事件 | 描述 | 实例 |
|---|---|---|
show.bs.modal | 在调用 show 方法后触发。 | $(‘#identifier’).on(‘show.bs.modal’, function () {// 执行一些动作…}) |
shown.bs.modal | 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 | $(‘#identifier’).on(‘shown.bs.modal’, function () {// 执行一些动作…}) |
hide.bs.modal | 当调用 hide 实例方法时触发。 | $(‘#identifier’).on(‘hide.bs.modal’, function () { // 执行一些动作…}) |
hidden.bs.modal | 当模态框完全对用户隐藏时触发。 | $(‘#identifier’).on(‘hidden.bs.modal’, function () {// 执行一些动作…}) |
hide 触发
当点击隐藏模态框的时候触发
当点击右上角x按钮，或者点取消的时候调用hide.bs.modal会触发
<script>
// 模态框触发钩子 hide.bs.modal
$(function() {
$('#myModal').on('hide.bs.modal',
function() {
alert('隐藏模态框的时候会触发这个事件....');
})
});
</script>
在调用hide方法时候也会触发
$('#myModal').modal('hide')hidden 完全隐藏模态框触发
hide.bs.modal 是模态框消失之前触发
hidden.bs.modal是模态框完全消失后触发
<script>
// 模态框触发钩子 hide.bs.modal
$(function() {
$('#myModal').on('hidden.bs.modal',
function() {
alert('隐藏模态框的时候会触发这个事件....');
})
});
</script>
关闭模态框销毁校验
模态框在关闭的时候可以执行重置校验，关于重置校验方法，可以参考前面这篇https://www.cnblogs.com/yoyoketang/p/15745490.html
$(function() {
$('#myModal').on('hidden.bs.modal', function() {
// 销毁校验
var $form = $('#modal-form');
$form.data('formValidation').destroy();
$form.data('formValidation', null);
// 重新调用校验方法
validate_module_form('#modal-form')
})
});本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
