前端:Bootstrap 模态框

简介: 前端:Bootstrap 模态框

模态框比较常用,整理一下

<html lang="en">
<head>
    <title>Document</title>
    <!-- 1、引入必要的文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <h2>创建模态框(Modal)</h2>
    <!-- 2、按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击弹出模态框</button>


    <!-- 3、模态框(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="myModalTitle">模态框(Modal)标题</h4>
                </div>
                <div class="modal-body" id="myModalBody">在这里添加一些文本</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <a type="button" href="https://www.baidu.com/" class="btn btn-primary" id="myModalAction">确定</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

1.jpg

cdn:https://www.bootcdn.cn/


参考:

Bootstrap 模态框(Modal)插件

            </div>
目录
相关文章
|
Ubuntu Java Linux
Manjaro Linux 入门使用教程
Manjaro 是一款基于 Arch LInux 的自由开源发行版,它吸收了 Arch Linux 优秀丰富的软件管理,同时提供了稳定流畅的操作体验。
6700 1
Manjaro Linux 入门使用教程
|
Java Android开发 C++
【Android NDK 开发】Android Studio 使用 CMake 导入动态库 ( 构建脚本路径配置 | 指定动态库查找路径 | 链接动态库 )(二)
【Android NDK 开发】Android Studio 使用 CMake 导入动态库 ( 构建脚本路径配置 | 指定动态库查找路径 | 链接动态库 )(二)
719 0
【Android NDK 开发】Android Studio 使用 CMake 导入动态库 ( 构建脚本路径配置 | 指定动态库查找路径 | 链接动态库 )(二)
|
4月前
|
机器学习/深度学习 编解码 算法
对三种雷达信号调制类型的识别及MATLAB实现
对三种雷达信号调制类型的识别及MATLAB实现
|
4月前
|
Web App开发 Ubuntu 安全
Ubuntu操作系统全解析:桌面、服务器与风格详解
Linux Mint同样源自Ubuntu操作系统,并针对现代用户需求,预装了众多照片和多媒体应用程序。该系统秉承开源社区的理念,为用户提供安全、稳定且易于使用的操作系统。想要深入了解Linux Mint,不妨访问其官方网站。
|
C语言
C语言之斗地主游戏
该代码实现了一个简单的斗地主游戏,包括头文件引入、宏定义、颜色枚举、卡牌类、卡牌类型类、卡牌组合类、玩家类、游戏主类以及辅助函数等,涵盖了从牌的生成、分配、玩家操作到游戏流程控制的完整逻辑。
442 8
|
11月前
|
存储 Shell 网络安全
Centos7.9安装openldap
Centos7.9安装openldap
409 16
|
机器学习/深度学习 人工智能 监控
DayDayUp:7月25日,如何打造技术品牌影响力?顶级大咖独家传授—阿里云乘风者计划专家博主&CSDN TOP1“一个处女座程序猿”《我是如何通过写作成为百万粉丝博主的?》演讲全文回顾
DayDayUp:7月25日,如何打造技术品牌影响力?顶级大咖独家传授—阿里云乘风者计划专家博主&CSDN TOP1“一个处女座程序猿”《我是如何通过写作成为百万粉丝博主的?》演讲全文回顾 目录 个人简介 一、什么内容是受欢迎的写作内容? 1.1、学生(计算机相关)群体 1.2、同行(开发者)群体 1.3、好内容的特点 二、一些经典的技术文章逻辑框架设计 2.1、从写作逻辑和结构角度考虑 (1)、对于bug类型的文章——通过分析刨根问底 (2)、对于学习类型的文章—通过案例学以致用 (3)、对于总结类型的文章—通过思考产生共鸣 2.2、从写作技巧考虑 (1)、题目和摘要必须简单、清晰明了且定位
DayDayUp:7月25日,如何打造技术品牌影响力?顶级大咖独家传授—阿里云乘风者计划专家博主&CSDN TOP1“一个处女座程序猿”《我是如何通过写作成为百万粉丝博主的?》演讲全文回顾
|
Prometheus Kubernetes Cloud Native
听GPT 讲Prometheus源代码--discovery
听GPT 讲Prometheus源代码--discovery
343 0
|
监控 算法 安全
Study-路面裂缝检测识别系统设计
Study-路面裂缝检测识别系统设计
499 0
Study-路面裂缝检测识别系统设计