Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框

news2024/9/24 21:18:43

Bootstrap的JavaScript的模态框(modal)是覆盖在父窗体上的子窗体。通常，目的是显示一个单独的内容，可以在不离开父窗体的情况下有一些互动。
子窗体可以自定义内容，可提供信息展示、交互等功能。

01-一个简单的、基本的模态框示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <!--引入Bootstrap样式表文件-->
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <!--引入jQuery框架文件-->
    <script src="jquery-3.5.1.slim.js"></script>
    <!--引入Bootstrap脚本文件-->
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<h3 align="center" >定义模态框<h3>
<a href="#myModal" class="btn btn-default" data-toggle="modal">点此打开模态框</a>
<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <h3>模态框</h3>
            <p>这是弹出的模态框内容</p>
        </div>
    </div>
</div> 
</body>
</html>

运行效果如下：
在这里插入图片描述
在这里插入图片描述

02-一个完整的模态框示例代码

一个完整的模态框包括三个部分：头部、正文和页脚，分别使用类modal-header、modal-body和类modal-footer来定义。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一个完整的模态框示例代码</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">一个完整的模态框示例代码</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">
    打开模态框
</button>
<div class="modal fade" id="Modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">早春呈水部张十八员外</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">天街小雨润如酥，草色遥看近却无。</div>
            <div class="modal-body">最是一年春好处，绝胜烟柳满皇都。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">更多</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

重点代码说明：

①代码<button type="button" class="close" data-dismiss="modal">中的 data-dismiss="modal"是什么意思？
在Bootstrap中，data-dismiss 属性用于指定当用户与元素进行交互时，触发何种操作。在代码中，data-dismiss="modal" 是用于关闭模态框（Modal）的属性。

具体来说，这个属性告诉页面，当用户点击这个按钮时，应该关闭具有 id="Modal" 的模态框。这是模态框的关闭按钮，通常以 “X”（&times;）图标的形式呈现，用户点击它时，模态框会被关闭，不再显示在页面上。这是一种方便的方式来实现模态框的关闭操作，而不需要额外的JavaScript代码来处理关闭操作。
注意&times;就是代表“叉叉”形状。

所以，data-dismiss="modal" 可以理解为一个标记，告诉页面按钮的点击事件与模态框的关闭操作相关联。
运行效果如下：
在这里插入图片描述

在这里插入图片描述

03-设置模态框在垂直方向上居中

可以通过给模态框添加类modal-dialog-centered实现模态框在垂直方向上的居中。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模态框垂直居中</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">模态框垂直居中</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">
    打开模态框
</button>
<div class="modal fade" id="Modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">早春呈水部张十八员外</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">天街小雨润如酥，草色遥看近却无。</div>
            <div class="modal-body">最是一年春好处，绝胜烟柳满皇都。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">更多</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

04-设置模态框的大小

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置模态框大小</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">设置模态框大小</h3>
<!-- 大尺寸模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">大尺寸模态框</button>
<div class="modal example-modal-lg">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">大尺寸模态框</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body"> 落日无情最有情，遍催万树暮蝉鸣。</div>
            <div class="modal-body"> 听来咫尺无寻处，寻到旁边却不声。</div>
        </div>
    </div>
</div>
<!-- 小尺寸模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".example-modal-sm">小尺寸模态框</button>
<div class="modal example-modal-sm">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">小尺寸模态框</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">银烛秋光冷画屏，轻罗小扇扑流萤。</div>
            <div class="modal-body">天阶夜色凉如水，卧看牵牛织女星。</div>
        </div>
    </div>
</div>
</body>
</html>

运行效果如下：

在这里插入图片描述
在这里插入图片描述

05-模态框网格

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模态框网格</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">模态框网格</h2>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">
    打开模态框
</button>
<div class="modal" id="Modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">模态框网格</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 bg-success text-white">.col-md-4</div>
                        <div class="col-md-4 ml-auto bg-success text-white">.col-md-4 .ml-auto</div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 ml-md-auto bg-danger text-white">.col-md-3 .ml-md-auto</div>
                        <div class="col-md-4 ml-md-auto bg-danger text-white">.col-md-3 .ml-md-auto</div>
                    </div>
                    <div class="row">
                        <div class="col-auto mr-auto bg-warning">.col-auto .mr-auto</div>
                        <div class="col-auto bg-warning">.col-auto</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">更多</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

06-给模态框添加弹窗和提示

可以用JavaScript的popover方法实现给模态框添加弹窗，JavaScript的tooltip给模态框添加提示。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹窗和工具提示</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">弹窗和工具提示</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">
    打开模态框
</button>
<div class="modal" id="Modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">模态框标题</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-body">
                    <h5>弹窗</h5>
                    <p><a href="#" role="button" class="btn btn-secondary popover-test" title="望岳" data-content="荡胸生曾云，决眦入归鸟。会当凌绝顶，一览众山小。">古诗</a></p><hr>
                    <h5>工具提示</h5>
                    <p><a href="#" class="tooltip-test" title="古诗一">古诗一</a>、<a href="#" class="tooltip-test" title="古诗二">古诗二</a> 和 <a href="#" class="tooltip-test" title="古诗三">古诗三</a></p>
                </div>
                <script>
                    $(document).ready(function(){
                        //找到对应的属性类别，添加弹窗和工具箱提示
                        $('.popover-test').popover();
                        $('.tooltip-test').tooltip();
                    });
                </script>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

上面代码中有一段JavaScript代码，关于这段代码的详细介绍，请参见我的另一篇博文，链接：
https://blog.csdn.net/wenhao_ir/article/details/134029389

运行效果如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

07-为模态框添加动作的网页提示信息

在这里插入图片描述

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加用户行为</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-backdrop="false" data-keyboard="false" data-target="#Modal-test">
    打开模态框
</button>
<div class="modal" id="Modal-test">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">模态框标题</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">模态框正文</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        $("#Modal-test").on("shown.bs.modal",function(){
            alert("模态框显示完成")
        })
        $("#Modal-test").on("hidden.bs.modal",function(){
            alert("模态框隐藏完成")
        })
    })
</script>
</html>

运行效果如下：
在这里插入图片描述
点击上面截图中的“打开模态框”，出现下面的提示：
在这里插入图片描述
再点击上面截图中的“确定”，出现模态框：
在这里插入图片描述
点击上图中的“关闭”按钮，出现下面的提示：
在这里插入图片描述
再点击上图中的“确定”，提示和模态框均消失。

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

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

相关文章

牛客网刷题-(4)

牛客网刷题-(4)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…
阅读更多...
优秀采购管理7大必备流程（含模块）展示图(干货！）

优秀采购管理7大必备流程（含模块）展示图(干货！）

企业是一个多人分工完成特定事项&#xff0c;达成特定经济目标的组织&#xff0c;必然存在分工协作&#xff0c;因此必然存在流程。企业管理如果缺乏流程规范&#xff0c;员工思想、行动都难以统一&#xff0c;事务出错率高&#xff0c;人员培养成本高&#xff0c;产品次品率高…
阅读更多...
Qt QWebEngine 更换语言

Qt QWebEngine 更换语言

背景 使用Qt QWebEngine开发的应用&#xff0c;在一些场景下&#xff0c;会显示英文文本&#xff0c;比如右键、JS弹出的对话框&#xff0c;所以需要进行汉化&#xff0c;更改语言。 准备翻译文件 Qt有提供翻译好的ts文件&#xff0c;我们可以直接下载ts文件qtwebengine_zh_…
阅读更多...
创建资产报错：号码范围 71 没有在号码分配范围内

创建资产报错：号码范围 71 没有在号码分配范围内

财务同事在新创建的公司下创建资产出现报错。 原因是没有给这个公司资产分配编码段。 双击报错&#xff0c;查看详细报错。 然后点击继续执行&#xff0c;会直接跳出维护资产编码的页面。从母公司中把字段编码copy一下就好了。 或者 通过事务代码&#xff0c;或者通过下面IMG…
阅读更多...
HackTheBox - Starting Point -- Tier 0 ---Fawn

HackTheBox - Starting Point -- Tier 0 ---Fawn

文章目录 一 题目二 实验过程 一 题目 Tags FTP、Network、Protocols、Reconnaissance、Anonymous/Guest Access译文&#xff1a;文件传输协议、网络、协议、侦察、匿名/访客访问Connect To attack the target machine, you must be on the same network.Connect to the Sta…
阅读更多...
【知识专栏丨python数分实战】电商数据分析案例

【知识专栏丨python数分实战】电商数据分析案例

01 电商数据来源 1.商品API&#xff1a;提供了搜索、详情、评价等与商品相关的接口&#xff0c;可以通过关键词搜索商品&#xff0c;获取商品详情、销量等信息。 2. 店铺API&#xff1a;提供了店铺信息、店铺内商品等接口&#xff0c;可以查询店铺的基本信息、主营类目、评分…
阅读更多...
app广告变现平台怎么选？聚合广告平台的优势有哪些？

app广告变现平台怎么选？聚合广告平台的优势有哪些？

app在接广告的时候&#xff0c;开发者考虑最多的就是怕影响用户体验&#xff0c;在广告收益和流量变现之间找一个平衡&#xff0c;这个是需要一定的仔细思考的。广告多了&#xff0c;用户体验被伤害了&#xff0c;那app的留存日活都会受到影响&#xff0c;但是不上广告的话&…
阅读更多...
反向传播法（backpropagation）的基本原理

反向传播法（backpropagation）的基本原理

本文通过整理李宏毅老师的机器学习教程的内容&#xff0c;介绍神经网络中用于更新参数的反向传播法&#xff08;backpropagation&#xff09;的基本原理。 反向传播 backpropagation, 李宏毅 神经网络的结构&#xff1a; loss&#xff08;损失&#xff09;的计算&#xf…
阅读更多...
淘宝、京东双11活动全自动脚本丨IOS+安卓

淘宝、京东双11活动全自动脚本丨IOS+安卓

淘宝的活动 - 幻想岛总动员开始了&#xff01; 又开始手忙脚乱地做任务了&#xff0c;逛逛蚂蚁森林、芭芭农场、答题、逛店铺...很多任务&#xff0c;纯手动当然很累&#xff0c;这个时候&#xff0c;我们就需要借助一些脚本软件&#xff0c;让他自动完成任务&#xff0c;薅点小…
阅读更多...
基于android的 rk3399 同时支持多个USB摄像头

基于android的 rk3399 同时支持多个USB摄像头

基于android的 rk3399 同时支持多个USB摄像头 一、前文二、CameraHal_Module.h三、CameraHal_Module.cpp四、编译&烧录Image五、App验证 一、前文 Android系统默认支持2个摄像头&#xff0c;一个前置摄像头&#xff0c;一个后置摄像头 需要支持数量更多的摄像头&#xff0…
阅读更多...
博睿动态｜GOPS全球运维大会2023上海站即将开启！

博睿动态｜GOPS全球运维大会2023上海站即将开启！

10月26日&#xff0c;博睿数据将应邀出席第二十一届 GOPS 全球运维大会&#xff0c;大会为期2天&#xff0c;侧重方向是 DevOps、BizDevOps、AIOps、DevSecOps、云原生、效能度量等技术领域。 博睿数据AIOps首席专家兼产品总监贺安辉受邀出席10月26日的AIOps最佳实践及解决方案…
阅读更多...
8 路数字量输入兼容干接点、湿节点多功能RTU

8 路数字量输入兼容干接点、湿节点多功能RTU

污水处理厂是处理废水并确保其符合排放标准的重要设施。为了监控和管理污水处理厂的流量和流速数据&#xff0c;采集网关在其中起到关键作用。本文将介绍污水处理厂流量流速数据采集网关的功能、工作原理以及其在污水处理厂中的重要性。 实时监测流量和流速数据&#xff1a;网关…
阅读更多...
Arduion-STM32

Arduion-STM32

​ Arduion-STM32 stm32duino 让stm32 在arduino中使用 源代码&#xff1a;GitHub - stm32duino/Arduino_Core_STM32: STM32 core support for Arduino busybox文件位置 stm32duino 下有个stm32tool 项目&#xff0c;内含有busybox.exe 使用usb转TTL烧写 使用 PA9 PA10 …
阅读更多...
Linux cd命令：切换目录

Linux cd命令：切换目录

cd 命令&#xff0c;是 Change Directory 的缩写&#xff0c;用来切换工作目录。Linux 命令按照来源方式&#xff0c;可分为两种&#xff0c;分别是 Shell 内置命令和外部命令。 所谓 Shell 内置命令&#xff0c;就是 Shell 自带的命令&#xff0c;这些命令是没有执行文件的&a…
阅读更多...
VulnHub Tre

VulnHub Tre

一、信息收集 1.nmap扫描 发现开发端口&#xff1a;22、80、8082 访问80和8082端口&#xff0c;没有发现什么有价值的信息 2.扫描目录 dirsearch扫描目录 ┌──(root&#x1f480;kali)-[~/routing/dirsearch-] └─# python3 dirsearch.py -u "http://192.168.103.1…
阅读更多...
sudo apt update 后会出现的一堆问题的解决

sudo apt update 后会出现的一堆问题的解决

于是&#xff0c;我选择卸载CUDA &#xff1a; 采用的方法是&#xff1a; cd /usr/local/cuda-11.4/bin/ sudo ./cuda-uninstaller sudo rm -rf /usr/local/cuda-11.4 然后重新下载CUDA&#xff1a; 下载的时候注意&#xff1a; 首先选择下载对应的版本&#xff0c;如果还…
阅读更多...
C++基础语法——智能指针

C++基础语法——智能指针

目录 1.智能指针存在的意义 2.内存泄漏 ①什么是内存泄漏&#xff0c;内存泄漏的危害 ②内存泄漏分类 ③如何检测内存泄漏 ④如何避免内存泄漏 3.智能指针的使用及其模拟实现 ①RAII ②智能指针的原理 ③std::auto_ptr 模拟实现 ④std::unique_ptr 模拟实现 ⑤st…
阅读更多...
【目标跟踪】ECO算法论文阅读：ECO: Efficient Convolution Operators for Tracking

【目标跟踪】ECO算法论文阅读：ECO: Efficient Convolution Operators for Tracking

文章目录 1. 论文概要2. 研究背景和动机3. 相关滤波用于目标跟踪的原理4. ECO算法流程5. ECO算法创新点5.1 特征降维&#xff1a;PCA5.2 训练集简化&#xff1a;GMM5.3 模型更新策略&#xff1a;间歇更新 1. 论文概要 论文下载地址&#xff1a;ECO: Efficient Convolution Oper…
阅读更多...
UG\NX二次开发 设置对象的高亮状态 UF_DISP_set_highlight

UG\NX二次开发 设置对象的高亮状态 UF_DISP_set_highlight

文章作者：里海 来源网站：王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 感谢粉丝订阅 感谢 2301_79203630 订阅本专栏，非常感谢。 简介 UG\NX二次开发 设置对象高亮状态 UF_DISP_set_highlight 效果 代码 #include "me.hpp"extern DllEx…
阅读更多...
Redis数据库管理工具Redis Desktop Manager最新中文

Redis数据库管理工具Redis Desktop Manager最新中文

Redis Desktop Manager是一款直观且易用的Redis数据库管理工具&#xff0c;支持Windows、macOS和Linux等多平台。它提供了丰富的功能和工具&#xff0c;使用户可以轻松地创建、编辑、删除和浏览Redis键值对&#xff0c;并执行各种Redis命令。通过SSH Tunnel连接&#xff0c;RDM…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023