前端: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 优秀丰富的软件管理,同时提供了稳定流畅的操作体验。
6648 1
Manjaro Linux 入门使用教程
|
Java Android开发 C++
【Android NDK 开发】Android Studio 使用 CMake 导入动态库 ( 构建脚本路径配置 | 指定动态库查找路径 | 链接动态库 )(二)
【Android NDK 开发】Android Studio 使用 CMake 导入动态库 ( 构建脚本路径配置 | 指定动态库查找路径 | 链接动态库 )(二)
706 0
【Android NDK 开发】Android Studio 使用 CMake 导入动态库 ( 构建脚本路径配置 | 指定动态库查找路径 | 链接动态库 )(二)
|
3月前
|
Web App开发 Ubuntu 安全
Ubuntu操作系统全解析:桌面、服务器与风格详解
Linux Mint同样源自Ubuntu操作系统,并针对现代用户需求,预装了众多照片和多媒体应用程序。该系统秉承开源社区的理念,为用户提供安全、稳定且易于使用的操作系统。想要深入了解Linux Mint,不妨访问其官方网站。
|
C语言
C语言之斗地主游戏
该代码实现了一个简单的斗地主游戏,包括头文件引入、宏定义、颜色枚举、卡牌类、卡牌类型类、卡牌组合类、玩家类、游戏主类以及辅助函数等,涵盖了从牌的生成、分配、玩家操作到游戏流程控制的完整逻辑。
402 8
|
10月前
|
存储 Shell 网络安全
Centos7.9安装openldap
Centos7.9安装openldap
352 16
|
开发者 UED
Axure“Web高端交互元件库”:产品与设计的得力助手
这套“Web高端交互元件库”精心构建了四大板块内容,分别是登陆首页集合、Web框架集合、表单元件集合以及主流后台组件。每一板块都包含了大量实用且美观的交互元件,设计师与开发者可以根据具体项目需求,快速找到并应用这些元件,从而大大提升工作效率。
261 1
|
机器学习/深度学习 人工智能 算法
「AI人工智能」什么是AI技术
**AI技术概览** 本文探讨人工智能(AI)的核心,包括知识图谱、问答系统和AI芯片。AI在硅光芯片、个性化推荐等领域展现趋势,前端开发与AI结合,涉及人机交互、数据可视化和模型训练。此外,文章讨论了监督学习的应用、深度学习工程师的市场需求,以及梯度消失等问题,提示了适宜的批量大小对随机梯度下降的影响。
3709 0
「AI人工智能」什么是AI技术
|
分布式计算 Hadoop Java
面向开发者的Hadoop编程指南
【8月更文第28天】Hadoop是一个开源软件框架,用于分布式存储和处理大规模数据集。它由Hadoop分布式文件系统(HDFS)和MapReduce编程模型组成。本指南旨在帮助初学者和中级开发者快速掌握Hadoop的基本概念和编程技巧,并通过一些简单的示例来加深理解。
528 0
|
存储 安全 编译器
使用unsafe库操作结构体的属性偏移和指针转换
【5月更文挑战第19天】Go语言是类型安全的,但通过`unsafe`包,可以进行结构体属性偏移量计算和指针转换。`unsafe.Offsetof`获取结构体字段的偏移量,`unsafe.Pointer`允许不同类型指针间的转换。然而,这可能导致类型安全屏障被绕过,若使用不当,会引发安全问题或panic。应谨慎使用`unsafe`,因为它不遵循GO 1兼容性准则。
167 0
使用unsafe库操作结构体的属性偏移和指针转换