前端: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>
目录
相关文章
|
Java Android开发 C++
【Android NDK 开发】Android Studio 使用 CMake 导入动态库 ( 构建脚本路径配置 | 指定动态库查找路径 | 链接动态库 )(二)
【Android NDK 开发】Android Studio 使用 CMake 导入动态库 ( 构建脚本路径配置 | 指定动态库查找路径 | 链接动态库 )(二)
675 0
【Android NDK 开发】Android Studio 使用 CMake 导入动态库 ( 构建脚本路径配置 | 指定动态库查找路径 | 链接动态库 )(二)
|
10月前
|
C语言
C语言之斗地主游戏
该代码实现了一个简单的斗地主游戏,包括头文件引入、宏定义、颜色枚举、卡牌类、卡牌类型类、卡牌组合类、玩家类、游戏主类以及辅助函数等,涵盖了从牌的生成、分配、玩家操作到游戏流程控制的完整逻辑。
321 8
|
机器学习/深度学习 人工智能 算法
「AI人工智能」什么是AI技术
**AI技术概览** 本文探讨人工智能(AI)的核心,包括知识图谱、问答系统和AI芯片。AI在硅光芯片、个性化推荐等领域展现趋势,前端开发与AI结合,涉及人机交互、数据可视化和模型训练。此外,文章讨论了监督学习的应用、深度学习工程师的市场需求,以及梯度消失等问题,提示了适宜的批量大小对随机梯度下降的影响。
1991 0
「AI人工智能」什么是AI技术
|
存储 安全 编译器
使用unsafe库操作结构体的属性偏移和指针转换
【5月更文挑战第19天】Go语言是类型安全的,但通过`unsafe`包,可以进行结构体属性偏移量计算和指针转换。`unsafe.Offsetof`获取结构体字段的偏移量,`unsafe.Pointer`允许不同类型指针间的转换。然而,这可能导致类型安全屏障被绕过,若使用不当,会引发安全问题或panic。应谨慎使用`unsafe`,因为它不遵循GO 1兼容性准则。
146 0
使用unsafe库操作结构体的属性偏移和指针转换
|
Prometheus Kubernetes Cloud Native
听GPT 讲Prometheus源代码--discovery
听GPT 讲Prometheus源代码--discovery
267 0
|
机器学习/深度学习 人工智能 监控
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“一个处女座程序猿”《我是如何通过写作成为百万粉丝博主的?》演讲全文回顾
|
机器学习/深度学习 算法 数据安全/隐私保护
数字水印的攻击类型
数字水印的攻击类型
642 0
|
XML 数据格式 Python
彻底搞懂Python 中的 import 与 from import
彻底搞懂Python 中的 import 与 from import
819 0