前言

模态框（Modal）是覆盖在父窗体上的子窗体，使用场景比如：在页面上编辑内容的时候经常需要弹出一个框框，可以编辑字段提交。
点删除按钮的时候，需要弹出二次确认框，这种现页面上的框框就是模态框

模态框(modal)

调用模态框有2种方法：
第一种方法：
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，
同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）

第二种方法：
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：$('#identifier').modal(options)

# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/<!-- 按钮触发模态框 --><button id="myBtn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点我弹出模态框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4></div><div class="modal-body">删除后不可恢复，确定删除？<button type="button" class="close" data-dismiss="modal"aria-hidden="true">这是close模糊</button></div><div class="modal-footer"><button type="button" class="btn btn-primary">确定删除</button><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div>

弹出效果

代码讲解：

<!-- 按钮触发模态框 -->
<button id="myBtn" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点我弹出模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

使用模态窗口，您需要有某种触发器,可以使用按钮或链接。
这里我们使用的是按钮<button>：

在 <button> 标签中，data-target="#myModal" 是想要在页面上加载的模态框的目标，把模态框绑定到此按钮上。
在 <button> 标签中，data-toggle="modal"用于点击 button 后打开模态窗口，如果没这个属性点击后不会出现模态框

模态框中class属性：

.modal，用来把 <div> 的内容识别为模态框，这个属性是必须的。
.fade 当模态框被切换时，它会引起内容淡入淡出,这个是fade属性可以是加载模态框的效果，也可以去掉，模态框就直接弹出来（没有淡入淡出）。

模态框的标题modal-header

aria-labelledby="myModalLabel"，该属性引用模态框的标题。在<div class="modal-header"> 这一层中可以找到 <h4>的属性 id="myModalLabel"

模态窗默认不可见

aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。

关闭模态框（一般是取消按钮）

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

模态框分3个部分：头部，body,底部按钮

<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。

class="close"，close 是一个 CSS class，用于为模态窗口的按钮设置样式。

JavaScript 调用模态框

前面讲的是第一种实现方式：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"。
接着看第二种实现，先去掉 <button> 按钮的属性 data-toggle="modal"

    <!-- 按钮触发模态框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点我弹出模态框</button><!-- 模态框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

使用 JavaScript 脚本触发弹窗:$("#myModal").modal();

# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/<script type="text/javascript">$("#myBtn").click(function () {// 显示modal$("#myModal").modal();});</script>

点确定删除按钮后，可以只需一些对应的事情，任何收回模态框:$("#myModal").modal('hide')

<script type="text/javascript">//点按钮显示modal$("#myBtn").click(function () {// 显示modal$("#myModal").modal();});// 点确定删除按钮，隐藏modal$(".modal-footer>.btn-primary").click(function () {// 执行一些事情// 模态框modal 收回去$("#myModal").modal('hide');});</script>

模态框中用到的事件

常用的几个事件

事件	描述	实例
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 () {// 执行一些动作…})

这些事件可在函数中当钩子使用。

参考菜鸟教程https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

python测试开发django-122.bootstrap模态框(modal)学习相关推荐

python测试开发django -141.Bootstrap 面板(Panels)
前言面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向元素添加 class .panel 和 class .panel-default 即可基础面板不带标题的基本面板 ...
地图选点 php,百度地图选点–Bootstrap模态框(Modal)插件
在网站的开发过程中,例如商家的注册等,需要商家设定自己的经纬度进行对商家的精确定位,同时也方便用户查找到附近距离范围内的商家.这样更利于网站的用户和商家互动.商家设定自己的经纬度就需要使用到百度地图2 ...
Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现
场景对于弹出框bootstrap就有模态框(modal). 有时显示模态框,按键盘上ESC就会关闭模态框,所以在打开模态框时设置其属性. 实现 modal显示: $("#apAddAndE ...
bootstrap 模态框满屏_如何设置Bootstrap模态框modal的高度和宽度?
以下图片是Bootstrap4模态框默认大小,一般情况Bootstrap模态框有两个默认大小,一个是"modal-sm" 小模态框,一个是"modal-lg"大 ...
禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...
Bootstrap模态框modal的高度和宽度设置
(1)高度将style="height:900px"放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会 ...
python测试开发django（8）--django连接mysql
前言 Django对各种数据库提供了很好的支持,包括:PostgreSQL.MySQL.SQLite.Oracle.本篇以mysql为例简单介绍django连接mysql进行数据操作 Django连m ...
python测试开发django（9）--模型models详解
前言 Django模型是与数据库相关的,与数据库相关的代码一般写在models.py中,Django支持sqlite3,MySQL,PostgreSQL等数据库只需要在settings.py中配置即 ...
python测试开发django（20）--admin首页和title修改
前言 django的admin首页默认显示的"Django管理",title显示的是"Django站点管理员",这里的文案内容可以修改成自己项目的后台页面内容 ...

python测试开发django-122.bootstrap模态框(modal)学习

前言

模态框(modal)

JavaScript 调用模态框

模态框中用到的事件

python测试开发django-122.bootstrap模态框(modal)学习相关推荐

最新文章

热门文章