前端: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>
目录
相关文章
|
数据采集 Web App开发 JSON
Python爬虫:关于scrapy模块的请求头
Python爬虫:关于scrapy模块的请求头
749 0
Python爬虫:关于scrapy模块的请求头
|
机器学习/深度学习 数据采集 数据可视化
【DSW Gallery】数据分析经典案例:Kaggle竞赛之房价预测
Python是目前当之无愧的数据分析第一语言,大量的数据科学家使用Python来完成各种各样的数据科学任务。本文以Kaggle竞赛中的房价预测为例,结合JupyterLab Notebook,完成数据加载、数据探索、数据可视化、数据清洗、特征分析、特征处理、机器学习、回归预测等步骤,主要Python工具是Pandas和SKLearn。本文中仅仅使用了线性回归这一最基本的机器学习模型,读者可以自行尝试其他更加复杂模型,比如随机森林、支持向量机、XGBoost等。
【DSW Gallery】数据分析经典案例:Kaggle竞赛之房价预测
|
存储 XML 开发框架
Unity Metaverse(三)、Protobuf & Socket 实现多人在线
使用Scoket TCP和Protobuf通信协议实现多人在线。
534 1
Unity Metaverse(三)、Protobuf & Socket 实现多人在线
PHP:使用pecl安装 swoole
PHP:使用pecl安装 swoole
1194 0
|
存储 SQL 分布式数据库
phoenix连接hbase时的bug处理通用方法(亲测)
phoenix连接hbase时的bug处理通用方法(亲测)
1101 0
|
前端开发 JavaScript 数据库
如何使用 Restful ABAP Programming 编程模型开发一个支持增删改查的 Fiori 应用(二)
Restful ABAP Programming 编程模式是 ABAP 这门编程语言在不断向前进化的过程中,诞生的一门新的编程模型,简称为RAP模型。
326 0
如何使用 Restful ABAP Programming 编程模型开发一个支持增删改查的 Fiori 应用(二)
|
缓存 JavaScript 前端开发
分享:ThinkPHP和Webpack前后端结合构建SEO多页应用的一个思路
分享:ThinkPHP和Webpack前后端结合构建SEO多页应用的一个思路
269 0
分享:ThinkPHP和Webpack前后端结合构建SEO多页应用的一个思路
|
SQL 前端开发 Shell
Django框架入门
Django框架入门
130 0
|
Python
Python:格式化时间精确到毫秒
Python:格式化时间精确到毫秒
504 0