前端: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>
目录
相关文章
N..
|
2月前
|
开发框架 前端开发 JavaScript
Bootstrap模态框
Bootstrap模态框
N..
15 1
|
4月前
|
编解码 移动开发 前端开发
【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
|
4月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
5月前
|
前端开发 JavaScript
Web前端之移动端课程开发之06.bootstrap
Web前端之移动端课程开发之06.bootstrap
48 0
|
7月前
|
前端开发
前端基础 - Bootstrap简单案例
前端基础 - Bootstrap简单案例
40 0
|
7月前
|
前端开发 JavaScript 容器
前端基础 - Bootstrap简介
前端基础 - Bootstrap简介
32 0
|
8月前
|
开发框架 前端开发 JavaScript
Bootstrap怎么搭建?导进JS项目?怎么用?是什么?(前端开发框架)
Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集,它简洁灵活,使得web开发更加的便捷.Bootstrap 由 Mark Otto 和 Jacob Thornton 在上开发,并于年 8 月 在 GitHub 上作为开源产品发布。
|
1天前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
|
7月前
|
前端开发
【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js
【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js
57 0
|
7月前
|
前端开发 容器
前端基础 - Bootstrap网格系统
前端基础 - Bootstrap网格系统
30 0