Bootstrap从入门到实战---模态框

最新推荐文章于 2024-05-03 11:44:49 发布
最新推荐文章于 2024-05-03 11:44:49 发布
阅读量188 收藏
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118558716
版权

Bootstrap从入门到实战—模态框
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        body {
            padding:20px;
        }
    </style>
</head>

    <!-- 高洛峰的简单例子 -->
    <div class="modal fade" id="mymodal">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>添加商品</h5>
                    <button class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    正在添加商品
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success">确定</button>
                    <button class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <button class="btn btn-success" data-target="#mymodal" data-toggle="modal">弹出模态框</button>

    <!-- 以下为手册例子 -->
    <!-- 简单例子 -->
    <div class="modal fade" id="mymodal2" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

      <button class="btn btn-success" data-target="#mymodal2" data-toggle="modal">mymodal2</button>


    <!-- 滚动长内容 -->
    <div class="modal fade" id="mymodal3" tabindex="-1">
        <div class="modal-dialog modal-dialog-scrollable">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
              <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

      <button class="btn btn-success" data-target="#mymodal3" data-toggle="modal">mymodal3</button>
    


    <!-- 工具提示和弹出框 -->
    <div class="modal fade " id="mymodal4" tabindex="-1">
        <div class="modal-dialog  modal-xl">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <h5>Popover in a modal</h5>
              <p>This <a href="#" role="button" data-toggle="popover" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute."> button</a> triggers a popover on click.</p>
              <hr>
              <h5>Tooltips in a modal</h5>
              <p><a href="https://www.baidu.com/" class="tooltip-test" title="Tooltip">This link</a>  and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
            </div>
            <div class="modal-body">

                <div class="embed-responsive embed-responsive-16by9">
                    <iframe src="https://www.eduwork.cn" frameborder="0"></iframe>
                </div>
              </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

      <button class="btn btn-success" data-target="#mymodal4" data-toggle="modal">mymodal4</button>


    <!-- 工具提示和弹出框2 -->
    <div class="modal fade " id="mymodal5" tabindex="-1">
      <div class="modal-dialog  modal-xl" style="height: 100px; right: 10px;position: absolute;">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <h5>Popover in a modal</h5>
            <p>This <a href="#" role="button" data-toggle="popover" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute."> button</a> triggers a popover on click.</p>
            <hr>
            <h5>Tooltips in a modal</h5>
            <p><a href="https://www.baidu.com/" class="tooltip-test" title="Tooltip">This link</a>  and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
          </div>
          <div class="modal-body">

              <div class="embed-responsive embed-responsive-16by9">
                  <iframe src="https://www.eduwork.cn" frameborder="0"></iframe>
              </div>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <button class="btn btn-success" data-target="#mymodal5" data-toggle="modal">mymodal5</button>



    <!-- 嵌套modal -->
    <div class="modal fade" id="mymodal6" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <p>Modal body text goes here.</p>

                <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                  <div class="toast-header">
                    <img src="images/1.jpg" style="height: 50px;" class="rounded mr-2" alt="..." >
                    <strong class="mr-auto">Bootstrap</strong>
                    <small>11 mins ago</small>
                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="toast-body">
                    Hello, world! This is a toast message1.
                  </div>
                </div>

                <div class="card" style="width: 18rem;">
                  <img src="images/1.jpg" style="height: 100px;" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                    <button id="btn" class="btn btn-success">弹出弹框</button>
                  </div>
                </div>
          </div>
        </div>
      </div>
    </div>

    <button class="btn btn-success" data-target="#mymodal6" data-toggle="modal">放入card</button>


    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="images/1.jpg" style="height: 50px;" class="rounded mr-2" alt="..." >
        <strong class="mr-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message1.
      </div>
    </div>


    <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>


    <script>
        $('#btn').click(function(){
            $('.toast').toast('show');
        });
    </script>


</body>
</html>

在这里插入图片描述

i see the future
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap的模态框（modal）
qq_42370421的博客
08-23 251
1、引入js文件 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.st
Bootstrap模拟对话框
weixin_30535167的博客
09-10 163
怎样获得远程数据，这是一个很纠结的问题。 同事推荐了一个别的模拟对话框，但是最后我都没用。 还是想用原生的，结果就是这样了。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=devic...
bootstrap- 模态框
橙_的博客
08-01 160
bootstrap 官方实例…(゜▽゜) <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> &lt...
bootstrap——模态框
ys_chy的博客
05-03 2331
让项目更加美观
bootstrap的模态框
weixin_69031161的博客
02-07 158
<div class="modal fade" id="addModal"> <!-- 这就是一个bootstrap的模态框 --> </div> <script> let 变量 = new bootstrap.Modal(模态框盒子) 变量.show() // 让模态框显示 变量.hide() // 让模态框隐藏 </script>
Bootstrap从入门到项目实战.zip
01-13
这个"Bootstrap从入门到项目实战.zip"压缩包显然是一份全面的学习资源，包含了从基础到进阶的各个阶段的案例代码，帮助用户掌握Bootstrap 4.0的所有核心概念。 首先，Bootstrap 4.0是该框架的一个重大更新，引入了...
Bootstrap 项目实战（入门版）
09-24
2. **预定义组件**：Bootstrap提供了一系列预先设计的组件，如导航栏、按钮、表单、模态框、卡片等，这些组件大大简化了网页设计的工作。通过实战案例，你可以学习如何使用和自定义这些组件。 3. **CSS样式**：...
全网超神bootstrap综合实战含源码
03-03
满意的效果插件.mp4**：这部分可能涉及Bootstrap内置的JavaScript插件，如模态框、下拉菜单、轮播图等，用于实现动态效果和增强用户体验。 2. **13.后台管理界面导航制作.mp4**：讲解如何利用Bootstrap构建后台管理...
bootstrop3从入门到项目实战
08-31
这个"Bootstrop3从入门到项目实战"的教程显然是为了帮助初学者和开发者快速掌握Bootstrap的核心概念和实际应用。 Bootstrap3 的核心特性包括响应式设计、预定义的组件和丰富的JavaScript插件。响应式设计使得网站在...
B站经典课程，bootstrap 从入门到精通(全套资料 代码).zip
09-03
这个“B站经典课程，bootstrap 从入门到精通”提供了全面的学习资源，帮助初学者和有经验的开发者深入理解和掌握Bootstrap的强大功能。 Bootstrap的核心特性在于其响应式设计和移动优先的策略。响应式设计意味着...
Bootstrap 模态框
qq_27009517的博客
06-07 182
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal"，同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框（带有 id="identifier"）。 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框： $('#identifier').modal(...
bootstrap模态框
qq_39432715的博客
10-09 153
1.导入bootatrap <link rel="stylesheet" href="../lib/bootstrap-4.5.0-dist/css/bootstrap.min.css"> <script src="../lib/jquery.min.js"></script> <script src="../lib/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
Bootstrap系列之模态框（Modal）
热门推荐
老__L的博客
06-16 1万+
模态框（Modal）
极速掌握MySQL存储过程，开学秒室友
2401_84046635的博客
04-07 332
上述知识点，囊括了目前互联网企业的主流应用技术以及能让你成为“香饽饽”的高级架构知识，每个笔记里面几乎都带有实战内容。很多人担心学了容易忘，这里教你一个方法，那就是重复学习。打个比方，假如你正在学习 spring 注解，突然发现了一个注解@Aspect，不知道干什么用的，你可能会去查看源码或者通过博客学习，花了半小时终于弄懂了，下次又看到@Aspect 了，你有点郁闷了，上次好像在哪哪哪学习，你快速打开网页花了五分钟又学会了。从半小时和五分钟的对比中可以发现多学一次就离真正掌握知识又近了一步。
2024年阿里首次分享：内部（珠峰版)Java笔记，看完直接斩获12家offer
最新发布
m0_72758098的博客
05-03 467
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
【bootstrap插件(模态框)】
a_shun66的博客
12-07 149
@TOC 模态框 不要在一个模态框上重叠另外一个模态框，要想同时支持多个模态框，需要自己写额外的代码来实现] 一定要将模态框的HTML代码放在文档的最高层内（尽量作为body标签的直接子元素），以避免其他组件影响模态框的展现和功能 <!-- fade 进入的透明度的一个变化 --> <!-- data-backdrop="static" 点击周围的遮罩不起作用 必须点击关闭按钮 为false时关闭遮罩层 --> <div id="mymodal" class="mo
前端：Bootstrap 模态框
彭世瑜的博客
06-13 1418
模态框比较常用，整理一下 <html lang="en"> <head> <title>Document</title> <!-- 1、引入必要的文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/boo...
Bootstrap 模态框（Modal）插件
dev_zyx的博客
06-04 1560
一、模态框基础内容 参考： Bootstrap 模态框（Modal）插件 Bootstrap4 模态框 bootstrap 模态框modal 传值问题 bootstrap模态框（弹出框），如何添加传参事件 Bootstrap 模态框（Modal）带参数传值实例 HTML接收后台参数，通过JS传递给Bootstrap模态框 bootstrap 模态框modal 传值问题 Bootstrap 模态框...
Bootstrap框架快速入门与实战指南
除了基础的栅格系统，Bootstrap还提供了丰富的组件，如导航栏、按钮、表单、模态框、下拉菜单等，以及定制和自定义选项。通过深入学习这些组件，开发者能够构建功能丰富且响应式的网站界面。 Bootstrap作为一个强大...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值