DDR爱好者之家

Bootstrap基本插件学习笔记之模态对话框(16)
站长资源 2024/11/28 佚名
68 1538
DDR爱好者之家 Design By 杰米

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

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

0x01基本样式

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="/UploadFiles/2021-04-02/jquery.min.js">


效果如下：


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


几点说明：


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

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

（3）在模态框中需要注意两点：一是.modal，用来把 <div> 的内容识别为模态框；二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。 

（4）<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。 

（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方式加载模态对话框，下面是一个用户登录界面的简单实现：





<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="/UploadFiles/2021-04-02/jquery.min.js">


效果如下：


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


上面的例子包含了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插件使用教程


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米