5.3 Bootstrap 模态框(Modal)插件

news2024/11/25 1:33:19

文章目录

  • Bootstrap 模态框（Modal）插件
    • 用法
    • 选项
    • 方法
    • 事件

Bootstrap 模态框（Modal）插件

在这里插入图片描述

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

注意：如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以切换模态框（Modal）插件的隐藏内容：

  • 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target=“#identifier” 或 href=“#identifier” 来指定要切换的特定的模态框（带有 id=“identifier”）。
  • 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框：
$('#identifier').modal(options)

实例

一个静态的模态窗口实例，如下面的实例所示：

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<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">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

结果如下所示：
在这里插入图片描述

代码讲解：

  • 使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
  • 如果您仔细查看上面的代码，您会发现在 <button> 标签中，data-target=“#myModal” 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
  • 在模态框中需要注意两点：
    1. 第一是 .modal，用来把 <div> 的内容识别为模态框。
    2. 第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
  • aria-labelledby=“myModalLabel”，该属性引用模态框的标题。
  • 属性 aria-hidden=“true” 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
  • <div class=“modal-header”>，modal-header 是为模态窗口的头部定义样式的类。
  • class=“close”，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
  • data-dismiss=“modal”，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
  • class=“modal-body”，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
  • class=“modal-footer”，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
  • data-toggle=“modal”，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

选项

有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称类型/默认值Data 属性名称描述
backdropboolean 或 string ‘static’ 默认值：truedata-backdrop指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
keyboardboolean 默认值：truedata-keyboard当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
showboolean 默认值：truedata-show当初始化时显示模态框。
remotepath 默认值：falsedata-remote使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示：<a data-toggle=“modal” href=“remote.html” data-target=“#modal”>请点击我</a>

方法

下面是一些可与 modal() 一起使用的有用的方法。

方法描述实例
Options:.modal(options)把内容作为模态框激活。接受一个可选的选项对象。$('#identifier').modal({
keyboard: false
})
Toggle: .modal(‘toggle’)手动切换模态框。$('#identifier').modal('toggle')
Show: .modal(‘show’)手动打开模态框。$('#identifier').modal('show')
Hide: .modal(‘hide’)手动隐藏模态框。$('#identifier').modal('hide')

实例

下面的实例演示了方法的用法：

<!-- 模态框（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">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">按下 ESC 按钮退出。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
$(function() {
    $('#myModal').modal({
        keyboard: true
    })
});
</script>

结果如下所示：
在这里插入图片描述

只需要点击 ESC 键，模态窗口即会退出。

事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

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

实例

下面的实例演示了事件的用法：

<!-- 模态框（Modal） -->
<h2>模态框（Modal）插件事件</h2>
<!-- 按钮触发模态框 -->
<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">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">点击关闭按钮检查事件功能。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
$(function() {
    $('#myModal').modal('hide')
})});
</script>
<script>
$(function() {
    $('#myModal').on('hide.bs.modal',
    function() {
        alert('嘿，我听说您喜欢模态框...');
    })
});
</script>

结果如下所示：
在这里插入图片描述

正如上面实例所示，如果您点击了 关闭 按钮，即 hide 事件，则会显示一个警告消息。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/781129.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言：杨氏矩阵中查找某数（时间复杂度小于O(N)）

C语言：杨氏矩阵中查找某数（时间复杂度小于O(N)）

题目&#xff1a; 有一个数字矩阵&#xff08;二维数组&#xff09;&#xff0c; 矩阵的每行从左到右是递增的&#xff0c;矩阵从上到下是递增的&#xff0c; 请编写程序在这样的矩阵中查找某个数字是否存在&#xff0c; 要求&#xff1a;时间复杂度小于O(N)。 思路&#xff1…
阅读更多...
Linux中docker的基本操作

Linux中docker的基本操作

文章目录 一、docker概述1.1 什么是docker1.2 Docker与虚拟机的特性区别1.3 容器在内核中支持2种重要技术1.4 docker的核心概念 二、安装docker三、Docker 镜像操作四、Docker 容器操作 一、docker概述 1.1 什么是docker 是一个开源的应用容器引擎&#xff0c;基于go语言开发…
阅读更多...
Spring Web MVC 详解（1）

Spring Web MVC 详解（1）

目录 一、介绍 MVC 二、Spring MVC 的三个基本功能 1.1 连接功能 1.2 Spring MVC 的创建和使用 1.3 RequestMappig 介绍 1.4 Spring MVC 实现用户和 Spring 程序的连接 1.5 GetMapping 和 PostMaping 注解 1.6 Get 和 Post请求注解的多种写法 2.1 获取请求中参数的功…
阅读更多...
Redis的内存回收与内存淘汰策略

Redis的内存回收与内存淘汰策略

对于redis这样的内存型数据库而言&#xff0c;如何删除已过期的数据以及如何在内存满时回收内存是一项很重要的工作。 常见的redis内存回收的工作主要分为两个方面&#xff1a; 清理过期的key在内存不足时回收到足够的内存用以存储新的key 清理过期的key 我们很少在redis中…
阅读更多...
直接插入排序、希尔排序、直接选择排序、堆排序、冒泡排序——“数据结构与算法”

直接插入排序、希尔排序、直接选择排序、堆排序、冒泡排序——“数据结构与算法”

各位CSDN的uu们你们好呀&#xff0c;今天小雅兰的内容是数据结构与算法啦&#xff0c;是排序&#xff01;&#xff01;&#xff01;下面&#xff0c;让我们进入七大排序的世界吧&#xff01;&#xff01;&#xff01; 排序的概念及其运用 排序的概念 排序&#xff1a;所谓排序…
阅读更多...
算法提高-动态规划-斜率优化DP

算法提高-动态规划-斜率优化DP

斜率优化DP AcWing 300. 任务安排1AcWing 301. 任务安排2AcWing 302. 任务安排3AcWing 303. 运输小猫 AcWing 300. 任务安排1 #include <iostream> #include <cstring>typedef long long LL;using namespace std;const int N 5e3 10;int st[N], sc[N]; LL f[N];…
阅读更多...
全志F1C200S嵌入式驱动开发（基于usb otg的spi-nor镜像烧入）

全志F1C200S嵌入式驱动开发（基于usb otg的spi-nor镜像烧入）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 前面既然已经搞定了spi-nor驱动，那么下一步考虑的就是怎么从spi-nor flash上面加载uboot、kernel和rootfs。目前spi-nor就是一块白片，上面肯定什么都没有，那么这个时候，我们要做…
阅读更多...
贤鱼的刷题日常-P3375 【模板】KMP 字符串匹配

贤鱼的刷题日常-P3375 【模板】KMP 字符串匹配

&#x1f3c6;今日学习目标&#xff1a; &#x1f340;例题讲解P3375 【模板】KMP 字符串匹配 ✅创作者&#xff1a;贤鱼 ⏰预计时间&#xff1a;25分钟 &#x1f389;个人主页&#xff1a;贤鱼的个人主页 &#x1f525;专栏系列&#xff1a;c &#x1f341;贤鱼的个人社区&…
阅读更多...
(css)清除el-table背景色

(css)清除el-table背景色

(css)清除el-table背景色 效果&#xff1a; <el-table:data"gridData":header-cell-style"{text-align:center,color: #fff}":cell-style"{text-align:center,color: #fff }" ><el-table-column type"index" label"序号…
阅读更多...
linux下 UART串口相关

linux下 UART串口相关

RS232的串口设备在linux 上会被识别为 /dev/ttyS* 或者 ttymxc* 一、串口简介 操作串口我们一般通过以下指令&#xff1a; 1、查看串口波特率等信息&#xff1a; stty -F /dev/ttyS0 -a #ttyS0为要查看的串口 2、设置串口参数&#xff1a; stty -F /dev/ttyS0 ispeed 115…
阅读更多...
Qt实现双控制柄的Slider

Qt实现双控制柄的Slider

目标 实现带有左右两个控制柄的滑动条&#xff1b;控件可设定最小值和最大值&#xff1b;控件可设定控制柄的最小距离&#xff1b; 效果演示 思路 1. 标准的Slider控件只有一个Handle&#xff0c;所以想要通过改造QSlider来实现两个Handle是非常困难的&#xff0c;“自绘”…
阅读更多...
SpringBoot+jasypt-spring-boot-starter实现配置文件明文加密

SpringBoot+jasypt-spring-boot-starter实现配置文件明文加密

1.使用环境 springboot:2.1.4.RELEASE JDK:8 jasypt-spring-boot-starter:3.0.2 2.引入依赖 !-- 配置文件加密 --> <dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><ver…
阅读更多...
rust学习-智能指针

rust学习-智能指针

适用场景 有一个在编译时未知大小的类型&#xff0c;想在需要确切大小的上下文使用该类型值 示例1 无意义的例子&#xff1a;将一个单独的值存放在堆上并不是很有意义&#xff0c;b更应该放到栈上 fn main() {let b Box::new(5);// box 在 main 的末尾离开作用域时&#x…
阅读更多...
R语言 PCA筛选变量

R语言 PCA筛选变量

#PCA-筛选变量 X <- data[,2:415] pca <- prcomp(X, center TRUE, scale. TRUE) # 进行主成分分析 summary(pca) # 查看各个主成分的解释方差比例 library(factoextra) #碎石图依赖-fviz fviz_eig(pca,addlabelsT) #碎石图 X_selected <- pca$x[,1:20] # 选择前n个主…
阅读更多...
pytorch实现图像投影变换

pytorch实现图像投影变换

import cv2 import torchdef cpu_remap(numpy_img,mapx,mapy):return cv2.remap(numpy_img,mapx,mapy,cv2.INTER_LINEAR)def gpu_remap(numpy_img,map_tensor):numpy_img:原始图像格式为ndarraymap_tensor:[N,H,W,C]用于grid_sample的map参数&#xff0c;需要规制到-1到1# 准备…
阅读更多...
opencv直方图

opencv直方图

#include "iostream" #include "opencv2/opencv.hpp" using namespace std; using namespace cv;int main() {Mat img, gray;img imread("r4.jpg");cvtColor(img, gray, COLOR_BGR2GRAY);int nimages 1;//图片数量const int channels[] { 0 …
阅读更多...
信捷PLC RC低通滤波器(C语言实现)

信捷PLC RC低通滤波器(C语言实现)

PLC信号处理系列之RC低通滤波器算法详细介绍请参考下面文章： PLC信号处理系列之一阶低通(RC)滤波器算法_plc滤波算法程序_RXXW_Dor的博客-CSDN博客1、先看看RC滤波的优缺点 优点：采用数字滤波算法来实现动态的RC滤波，则能很好的克服模拟滤波器的缺点； 1、在模拟常数要求较…
阅读更多...
位域与共用体在通讯领域的应用

位域与共用体在通讯领域的应用

最近看到些代码&#xff0c;定义变量还能指定位宽&#xff0c;很有意思。像这样 unsigned int bit1 : 1;冒号 (&#x1f603; 后面的数字1表示变量的位宽或大小。 像这样的大小声明在低级编程和位操作中常被使用&#xff0c;以便精确控制变量的大小。 通讯协议解析用的多。 下面…
阅读更多...
电脑安装双系统ubuntu18.04+windows后开机直接进入Windows解决方法

电脑安装双系统ubuntu18.04+windows后开机直接进入Windows解决方法

电脑型号&#xff1a;联想拯救者Y9000K2021H 系统&#xff1a;Windows11Ubuntu18.04双系统 问题&#xff1a;笔记本安装双系统后&#xff0c;Windows系统下处理word或者看论文&#xff1b;Ubuntu18.04系统安装ros进行机械臂控制等的研究。但最近开机后发现没有系统选项了&#…
阅读更多...
【mars3d】将mars3d中的示例拷贝到自己项目中

【mars3d】将mars3d中的示例拷贝到自己项目中

mars3d 的功能示例 - 感觉做了很多的处理&#xff1b; 1、头部的按钮作用 重置和运行 - 这就是字面意思&#xff0c;都能理解哈&#xff1b; js - 顾名思义&#xff0c;js代码&#xff0c;也是我们可以改动的部分&#xff1b; 旁边那个 - 是vue部分&#xff0c;是不能修改的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023