ccodes.net
专注资源分享

如何禁用Bootstrap Modals(模态框)关闭

点击遮罩层的时候模态框会被关闭,或者用户点击关闭按钮后,模态框也会关闭,如果我不想让他关闭应该怎么修改呢很多时候我们会遇到如下情形,比如弹出模态框,内容为信息编辑表单,用户必须填写信息,用户不能关闭模态框,否则关闭网页或跳转页面。

在实现支持微信扫描登录的时候,也遇到相似的业务操作:当用户扫描二维码时,发现用户信息不全(缺少email信息,密码信息或其他),那么就会弹出编辑对话框,让用户完善基本信息,若用户执行关闭模态框操作,则清除用户之前的二维码扫描数据,并且不登陆。

今天我就来分享下如何解实现上述关闭模态框操作。

Bootstrap对于模态框的实现十分精简灵活,用户只需要使用少量的代码和智能的默认设置,即能实现传统实现传统的Javascript效果的模态窗口。默认的Bootstrap模态窗口效果,包括对话框从屏幕上方落下,屏幕其他区域变暗淡,模态窗口的隐藏等。这些效果分别对应.modal .fade .hide 这些类。我们可以不用写任何javascript代码来实现Modal效果,只需要将 data-toggle=”modal” 放置于在触发控制要素(如按钮,超链接等),并指定它的Modal窗口的ID链接(data-target=”#mymodal”,href=”#mymodal”)。当这些控制要素被触发的时候,modal窗口就会出现了。模式窗口的内容可以非常丰富,这些内容都需要包括在modal的div内,并可以定义modal窗口的头部,内容和脚部。

如果使用Jquery调用Modal,也只需要一行javascript代码,

$('#myModal').modal(options);

具体的实现弹出效果,我就不一一介绍了,今天我们主要解决如何禁用模态框关闭问题或者关闭模态框后实现我们自己的操作。

首先我们先来了解下模态框都支持些什么方法

1、 .modal(options)

将页面中的某块内容作为模态框激活。接受可选参数 object。

$('#myModal').modal({
keyboard: false
})

2.、 .modal(‘toggle’)

手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是,在触发 shown.bs.modal 或 hidden.bs.modal 事件之前)。

$('#myModal').modal('toggle')
.modal('show')

3、 手动打开模态框。在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal 事件之前)。

$('#myModal').modal('show')
.modal('hide')

4、手动隐藏模态框。在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal 事件之前)。

$('#myModal').modal('hide')

我们再来查看一下模态框都支持哪些事件

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

也就是说,你需要在用户执行 hide(关闭模态框)方法时,重写触发事件,实现自己的业务操作,具体调用如下:

禁用模态框的关闭功能:

$("#modal").on('hide.bs.modal', function (e) {
return false;// or your methods
});

当用户点击关闭按钮,刷新页面:

$("#modal").on('hide.bs.modal', function (e) {
location.reload();
});

当用户点击关闭按钮,调用后台API:

$("#modal").on('hide.bs.modal', function (e) {
$.Ajax(...);
//to do ...
});
没有账号? 忘记密码?

社交账号快速登录