BootStrap模态框

最新推荐文章于 2024-08-21 09:17:03 发布
最新推荐文章于 2024-08-21 09:17:03 发布
阅读量176 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40861561/article/details/105216658
版权 
模态框（Modal）是覆盖在父窗体上的子窗体,是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动
子窗体可提供信息、交互等

通过data属性:在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#myModal" 或 href="#myModal" 来指定要切换的特定的模态框（带有 id="myModal"）。
通过 JavaScript:使用这种技术，您可以通过简单的一行JavaScript来调用带有 id="myModal"的模态框:
$('#myModal').modal(options)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大模拟框</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">       
     极客的学习教程
    </div>
  </div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小模拟框</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      极客的学习教程
    </div>
  </div>
</div>
    </body>
</html>


模态框中需要注意两点： 
第一是.modal，用来把<div>的内容识别为模态框。
第二是.fade class,当模态框被切换时,它会引起内容淡入淡出。 
aria-labelledby="myModalLabel",该属性引用模态框的标题。
属性aria-hidden="true"用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
<div class="modal-header">,modal-header是为模态窗口的头部定义样式的类。 class="close",close是一个 CSS class,用于为模态窗口的关闭按钮设置样式。 data-dismiss="modal",是一个自定义的HTML5 data属性。在这里它被用于关闭模态窗口。 
class="modal-body",是Bootstrap CSS的一个CSS class,用于为模态窗口的主体设置样式。 
class="modal-footer",是Bootstrap CSS的一个CSS class,用于为模态窗口的底部设置样式。 
data-toggle="modal",HTML5自定义的data属性data-toggle用于打开模态窗口。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">提问</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="ModelLabel">
  <div class="modal-dialog">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
        <h4 class="modal-title">提问</h4>
      </div>
      <div class="modal-body">
        <p>问题描述</p>
        <template class="form-control"></template>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
 </div>
    </body>
</html>

data-backdrop="static" 点击空白不会收起 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">提问</button>
    <div class="modal fade" id="myModal"  data-backdrop="static"
 tabindex="-1" role="dialog" aria-labelledby="ModelLabel">
  <div class="modal-dialog">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
        <h4 class="modal-title">提问</h4>
      </div>
      <div class="modal-body">
        <p>问题描述</p>
        <template class="form-control"></template>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
 </div>
    </body>
</html>

方法

下面是一些可与 modal() 一起使用的有用的方法。

   方法描述实例
Options: .modal(options)作为模态框激活,可选的选项对象 
$('#identifier').modal({
keyboard: false
})
Toggle: .modal('toggle')手动切换模态框。 
$('#identifier').modal('toggle')
Show: .modal('show')手动打开模态框。 
$('#identifier').modal('show')
Hide: .modal('hide')手动隐藏模态框。 
$('#identifier').modal('hide')

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
<script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
 $(function(){
     $("#open").click(function(){
         $("#myModal").modal('show');
     });
         $("#submit").click(function(){
             alert("信息已经提交");
         $("#myModal").modal('hide');
     });
         $("#toggle").click(function(){
         $("#myModal").modal('toggle');
     });
 });
    </script>
</head>
<body>
    <button type="button" class="btn btn-primary" id="open">打开模拟窗口</button>
    <button type="button" class="btn btn-primary" id="close">关闭模拟窗口</button>
    <button type="button" class="btn btn-primary" id="toggle">切换模拟窗口</button>
    <div class="modal fade" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="ModelLabel">
  <div class="modal-dialog">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
        <h4 class="modal-title">提问</h4>
      </div>
      <div class="modal-body">
        <p>问题描述</p>
        <template class="form-control"></template>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
 </div>
    </body>
</html>
事件
下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件    描述  实例
show.bs.modal    在调用 show 方法后触发。 
$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})
shown.bs.modal    当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。   
$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})
hide.bs.modal    当调用 hide 实例方法时触发。   
$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})
hidden.bs.modal    当模态框完全对用户隐藏时触发。 
$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
<script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        $(function(){
            $("#myModal").on("show.bs.modal",function(){
            alert("显示模拟窗口");    
            });
            $("#myModal").on("shown.bs.modal",function(){
            alert("模拟窗口完毕");    
            });
            $("#myModal").on("hide.bs.modal",function(){
            alert("隐藏模拟窗口");    
            });
            $("#myModal").on("hidden.bs.modal",function(){
            alert("隐藏模拟窗口完毕");  
            });
        })
    </script>
</head>
<body>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">提问</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="ModelLabel">
  <div class="modal-dialog">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
        <h4 class="modal-title">提问</h4>
      </div>
      <div class="modal-body">
        <p>问题描述</p>
        <template class="form-control"></template>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">提交</button>
      </div>
    </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
 </div>
    </body>
</html>
秋城落叶
关注
bootstrap之模态框
catherine_sfy的博客
03-01 462
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 ...
Bootstrap系列之模态框（Modal）
热门推荐
老__L的博客
06-16 1万+
模态框（Modal）
Bootstrap 模态框（Modal）插件
最新发布
lwx666sl的博客
08-21 1036
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
Bootstrap实现模态框
像风走过八千里
01-13 908
什么是模态框 模态框就是覆盖在父窗体上的子窗体，有点像弹出框，只不过这个弹出框是自己做出来的，可以显示自己设置的内容。 模态框的常用事件 目的 事件 实例 调用 show 方法后触发 show.bs.modal $("#myModel").on(‘show.bs.modal’,function () {//执行的操作}) 模态框对用户可见时触发 shown.bs.modal $...
Bootstrap 5 保姆级教程（十一）：模态框 & 提示框
Flag少侠的博客
04-20 2216
提示框要写在 JavaScript 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框。类名：modal-fullscreen。默认情况下提示框显示在元素上方。类名：modal-xl。类名：modal-lg。
极速掌握MySQL存储过程，开学秒室友
2401_84046635的博客
04-07 377
上述知识点，囊括了目前互联网企业的主流应用技术以及能让你成为“香饽饽”的高级架构知识，每个笔记里面几乎都带有实战内容。很多人担心学了容易忘，这里教你一个方法，那就是重复学习。打个比方，假如你正在学习 spring 注解，突然发现了一个注解@Aspect，不知道干什么用的，你可能会去查看源码或者通过博客学习，花了半小时终于弄懂了，下次又看到@Aspect 了，你有点郁闷了，上次好像在哪哪哪学习，你快速打开网页花了五分钟又学会了。从半小时和五分钟的对比中可以发现多学一次就离真正掌握知识又近了一步。
BootStrap 模态框实现刷新网页并关闭功能
08-31
Bootstrap模态框（Modal）是前端开发中常用的一种交互组件，它允许在当前页面上弹出一个浮动的对话框，而无需跳转到新的页面。在Bootstrap框架中，模态框提供了一种优雅的方式来呈现内容，同时保持了用户体验的一致...
Bootstrap 模态框（Modal）带参数传值实例
08-29
Bootstrap模态框（Modal）是Web开发中常用的一种交互元素，它允许用户在不离开当前页面的情况下处理额外信息或执行操作。在实际应用中，我们经常需要将数据从父页面传递到模态框中，以确保操作的针对性和准确性。本...
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
Bootstrap模态框（Modal）是该框架中一个非常重要的组件，它用于创建弹出式的对话框，常用于显示额外信息、表单输入或用户交互。然而，默认情况下，模态框在页面上的位置并不是水平垂直居中的，而是固定在距离顶部30...
bootstrap模态框实现拖拽效果
08-31
Bootstrap模态框（Modal）是一种常见的网页交互元素，它允许用户在不离开当前页面的情况下查看或操作额外的信息。在某些情况下，特别是在复杂布局中，模态框可能会被其他元素遮挡，这时就需要实现模态框的拖拽功能，...
bootstrap——模态框
ys_chy的博客
05-03 2555
让项目更加美观
BootStrap之模态框
骆小胖~
07-05 164
bootstrap-模态框
pyhui的技术博客
07-10 290
先创建一个按钮 模态框 三层结构 三个块 代码 效果 当前点击按钮没有效果。 下一步，让按钮与模态框关联起来 点击按钮后的效果 点击取消就关闭 dissmiss，消失 点击取消，框就会消失的了 添加一个fade样式，让出现有淡淡的感觉 设置大中小三个模态框 ...
bootstrap模态框
qq_39432715的博客
10-09 180
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）
qq_42370421的博客
08-23 296
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 模态框
qq_27009517的博客
06-07 213
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal"，同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框（带有 id="identifier"）。 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框： $('#identifier').modal(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值