Bootstrap基本插件学习笔记之模态对话框(16)

网友投稿 374 2023-06-26


Bootstrap基本插件学习笔记之模态对话框(16)

Bootstrap自带了很多jquery插件,给用户做前端开发提供了很大的方便。对于每一个插件,有2种引用方式:一是单独引用,即使用Bootstrap的单独*.js文件,这种方式需要注意的是一些插件和css组件可能依赖其他插件,所以单独引用的时候,需要弄清楚这种包含关系一并引用;二是直接引用完整的bootstrap.js或者压缩版的bootstrap.min.js,需要注意的是不能同时引用这2个文件。

Bootstrap自带了很多基本的插件,包括模态对话框、标签切换、Tooltip提示工具等。首先来总结下模态对话框的使用。

0x01基本样式

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。Bootstrap Modals(模态框)是使用定制的JQuery插件创建的。它可以用来创建模态窗口丰富用户体验,或fvhpX者为用户添加实用功能。

下面是一个基本样式:

data-target="#myModal">

打开模态框

效果如下:

几点说明:

(1)使用模态窗口,需要有某种触发器,可以使用按钮或链接。这里我们使用的是按钮。

(2)data-target="#myModal" 是想要在页面上加载的模态框的目标。

(3)在模态框中需要注意两点:一是.modal,用来把

(4)

(5)class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。

(6)data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

(7)class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。

(8)class="modal-footer",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。

(9)data-toggle="modal",HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

0x02 JS方式加载

除了上面通过属性方式加载外,还可以通过JS方式加载模态对话框,下面是一个用户登录界面的简单实现:

下次自动登录

忘记密码

效果如下:

上面的例子包含了JS加载modal的过程,也包括了设置模态对话框宽度、响应事件等内容。modal方法结合一些参数来实现特殊效果:

(1)把内容作为模态框激活。接受一个可选的选项对象:

$("#myModal").modal({

keyboard:true,

})

(2)状态切换

$("#myModal").modal('toggle') //手动打开模态框。

$("#myModal").modal('hide') //手动隐藏模态框。

0x03 事件

Bootstrap模态对话框还定义了事件,通过“钩子”的方式调用:

(1)show.bs.modal

在调用 show 方法后触发:

$('#myModal').on('show.bs.modal', function () {

// 执行一些动作...

})

(2)shown.bs.modal

当模态框对用户可见时触发(将等待 CSS 过渡效果完成):

$('#myModal').on('shown.bs.modal', function () {

// 执行一些动作...

})

(3)hide.bs.modal

当调用 hide 实例方法时触发:

$('#myModal').on('hide.bs.modal', function () {

// 执行一些动作...

})

(4)hidden.bs.modal

当模态框完全对用户隐藏时触发:

$('#myModal').on('hidden.bs.modal', function () {

// 执行一些动作...

})

上面用户登录的例子中事件部分代码:

$("#myModal").on("hidden.bs.modal",function () {

alert('test');

})

当模态框完全对用户隐藏时,就会调用执行这段JS代码。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:BootStrap 实现各种样式的进度条效果
下一篇:java Spring松耦合高效应用简单实例分析
相关文章

 发表评论

暂时没有评论,来抢沙发吧~