前端: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>
目录
相关文章
|
Perl
使用三剑客(grep,sed,awk)获取IP地址
使用三剑客(grep,sed,awk)获取IP地址
1507 0
|
存储 数据安全/隐私保护
音乐宿主软件有哪些?哪个最好用?FL Studio/Cubase/Studio one
现如今市面上的音乐宿主软件有很多,同时每个音乐宿主软件都有其优缺点,选择哪款音乐宿主软件,就成了新入门小伙伴面临的一个难题,所以今天和大家分享一下,音乐宿主软件对比,音乐宿主软件需要什么配置。
6708 0
|
安全 Android开发 iOS开发
Android vs. iOS:构建生态差异与技术较量的深度剖析###
本文深入探讨了Android与iOS两大移动操作系统在构建生态系统上的差异,揭示了它们各自的技术优势及面临的挑战。通过对比分析两者的开放性、用户体验、安全性及市场策略,本文旨在揭示这些差异如何塑造了当今智能手机市场的竞争格局,为开发者和用户提供决策参考。 ###
|
Python
Python软件包及环境管理器conda实战篇
详细介绍了如何使用conda进行Python软件包管理及环境管理,包括查看、安装、卸载软件包,切换源,管理不同版本的Python环境,以及解决使用过程中可能遇到的错误。
595 2
Python软件包及环境管理器conda实战篇
|
存储 缓存 安全
动态DMA映射指南 【ChatGPT】
动态DMA映射指南 【ChatGPT】
|
前端开发 安全 区块链
前沿技术探索:Web3.0与前端开发的融合之路
【2月更文挑战第12天】 在数字技术快速发展的今天,Web3.0作为互联网的新阶段,不仅预示着去中心化、更加智能化的网络环境,还为前端开发带来了前所未有的挑战与机遇。本文将深入探讨Web3.0对前端开发的影响,分析其在实际应用中如何与前端技术融合,以及前端开发者如何适应这一变革,把握新时代的技术趋势。通过案例分析与技术展望,我们将一窥Web3.0与前端开发融合的未来图景,为前端开发者提供新的思考和行动指南。
583 26
|
应用服务中间件 nginx
【报错集锦】mkdir(): Permission denied
【报错集锦】mkdir(): Permission denied
1480 0
【报错集锦】mkdir(): Permission denied
|
运维 监控 Java
Java在运维领域的技术应用与实践
Java在运维领域的技术应用与实践
236 1
|
弹性计算 缓存 测试技术
2核4g服务器能支持多少人访问?阿里云2核4G服务器并发数测试
2核4g服务器能支持多少人访问?阿里云2核4G服务器并发数测试,2核4G服务器并发数性能测试,阿小云账号下的2核4G服务器支持20人同时在线访问,然而应用不同、类型不同、程序效率不同实际并发数也不同,2核4G服务器的在线访问人数取决于多个变量因素
|
算法 芯片 数据库管理
【视野提升】智能座舱SoC芯片应用需求趋势分析
【视野提升】智能座舱SoC芯片应用需求趋势分析
528 0