BootStrap模态框

客官°小女子只卖身不卖艺 2023-07-19 12:28 117阅读 0赞 
  1. 模态框（Modal）是覆盖在父窗体上的子窗体,是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动
  2. 子窗体可提供信息、交互等
  4. 通过data属性:在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#myModal" 或 href="#myModal" 来指定要切换的特定的模态框（带有 id="myModal"）。
  5. 通过 JavaScript:使用这种技术，您可以通过简单的一行JavaScript来调用带有 id="myModal"的模态框:
  6. $('#myModal').modal(options)
  8. <!DOCTYPE html>
  9. <html>
  10.     <head>
  11.         <meta charset="UTF-8">
  12.         <title></title>
  13. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
  14. <script type="text/javascript" src="js/bootstrap.min.js"></script> 
  15. <script type="text/javascript" src="js/jquery.min.js"></script>
  16. </head>
  17. <body>
  18. <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">大模拟框</button>
  19. <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  20.   <div class="modal-dialog modal-lg" role="document">
  21.     <div class="modal-content">       
  22.      极客的学习教程
  23.     </div>
  24.   </div>
  25. </div>
  26. <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">小模拟框</button>
  27. <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  28.   <div class="modal-dialog modal-sm" role="document">
  29.     <div class="modal-content">
  30.       极客的学习教程
  31.     </div>
  32.   </div>
  33. </div>
  34.     </body>
  35. </html>
  37. 模态框中需要注意两点： 
  38. 第一是.modal，用来把<div>的内容识别为模态框。
  39. 第二是.fade class,当模态框被切换时,它会引起内容淡入淡出。 
  40. aria-labelledby="myModalLabel",该属性引用模态框的标题。
  41. 属性aria-hidden="true"用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
  42. <div class="modal-header">,modal-header是为模态窗口的头部定义样式的类。 class="close",close是一个 CSS class,用于为模态窗口的关闭按钮设置样式。 data-dismiss="modal",是一个自定义的HTML5 data属性。在这里它被用于关闭模态窗口。 
  43. class="modal-body",是Bootstrap CSS的一个CSS class,用于为模态窗口的主体设置样式。 
  44. class="modal-footer",是Bootstrap CSS的一个CSS class,用于为模态窗口的底部设置样式。 
  45. data-toggle="modal",HTML5自定义的data属性data-toggle用于打开模态窗口。
  47. <!DOCTYPE html>
  48. <html>
  49.     <head>
  50.         <meta charset="UTF-8">
  51.         <title></title>
  52. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
  53. <script type="text/javascript" src="js/bootstrap.min.js"></script> 
  54. <script type="text/javascript" src="js/jquery.min.js"></script>
  55. </head>
  56. <body>
  57.     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">提问</button>
  58.     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="ModelLabel">
  59.   <div class="modal-dialog">
  60.       <div class="modal-header">
  61.         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
  62.         <h4 class="modal-title">提问</h4>
  63.       </div>
  64.       <div class="modal-body">
  65.         <p>问题描述</p>
  66.         <template class="form-control"></template>
  67.       </div>
  68.       <div class="modal-footer">
  69.         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  70.         <button type="button" class="btn btn-primary">提交</button>
  71.       </div>
  72.     </div><!-- /.modal-content -->
  73.  </div><!-- /.modal-dialog -->
  74.  </div>
  75.     </body>
  76. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  7.  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  8.  <script type="text/javascript" src="js/jquery.min.js"></script>
  9. </head>
  10. <body>
  11.     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">提问</button>
  12.     <div class="modal fade" id="myModal"  data-backdrop="static"
  13.  tabindex="-1" role="dialog" aria-labelledby="ModelLabel">
  14.   <div class="modal-dialog">
  15.       <div class="modal-header">
  16.         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
  17.         <h4 class="modal-title">提问</h4>
  18.       </div>
  19.       <div class="modal-body">
  20.         <p>问题描述</p>
  21.         <template class="form-control"></template>
  22.       </div>
  23.       <div class="modal-footer">
  24.         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  25.         <button type="button" class="btn btn-primary">提交</button>
  26.       </div>
  27.     </div><!-- /.modal-content -->
  28.  </div><!-- /.modal-dialog -->
  29.  </div>
  30.     </body>
  31. </html>

方法

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





























   方法 描述 实例
Options: .modal(options) 作为模态框激活,可选的选项对象 
  1. $(‘#identifier’).modal({
    keyboard: false
    })
Toggle: .modal(‘toggle’) 手动切换模态框。 
  1. $(‘#identifier’).modal(‘toggle’)
Show: .modal(‘show’) 手动打开模态框。 
  1. $(‘#identifier’).modal(‘show’)
Hide: .modal(‘hide’) 手动隐藏模态框。 
  1. $(‘#identifier’).modal(‘hide’)
 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
  7. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  8.  <script type="text/javascript" src="js/jquery.min.js"></script>
  9.     <script>
  10.  $(function(){
  11.      $("#open").click(function(){
  12.          $("#myModal").modal('show');
  13.      });
  14.          $("#submit").click(function(){
  15.              alert("信息已经提交");
  16.          $("#myModal").modal('hide');
  17.      });
  18.          $("#toggle").click(function(){
  19.          $("#myModal").modal('toggle');
  20.      });
  21.  });
  22.     </script>
  23. </head>
  24. <body>
  25.     <button type="button" class="btn btn-primary" id="open">打开模拟窗口</button>
  26.     <button type="button" class="btn btn-primary" id="close">关闭模拟窗口</button>
  27.     <button type="button" class="btn btn-primary" id="toggle">切换模拟窗口</button>
  28.     <div class="modal fade" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="ModelLabel">
  29.   <div class="modal-dialog">
  30.       <div class="modal-header">
  31.         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
  32.         <h4 class="modal-title">提问</h4>
  33.       </div>
  34.       <div class="modal-body">
  35.         <p>问题描述</p>
  36.         <template class="form-control"></template>
  37.       </div>
  38.       <div class="modal-footer">
  39.         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  40.         <button type="button" class="btn btn-primary">提交</button>
  41.       </div>
  42.     </div><!-- /.modal-content -->
  43.  </div><!-- /.modal-dialog -->
  44.  </div>
  45.     </body>
  46. </html>
  48. 事件
  49. 下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。
  51. 事件    描述  实例
  52. show.bs.modal    在调用 show 方法后触发。 
  53. $('#identifier').on('show.bs.modal', function () {
  54.   // 执行一些动作...
  55. })
  56. shown.bs.modal    当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。   
  57. $('#identifier').on('shown.bs.modal', function () {
  58.   // 执行一些动作...
  59. })
  60. hide.bs.modal    当调用 hide 实例方法时触发。   
  61. $('#identifier').on('hide.bs.modal', function () {
  62.   // 执行一些动作...
  63. })
  64. hidden.bs.modal    当模态框完全对用户隐藏时触发。 
  65. $('#identifier').on('hidden.bs.modal', function () {
  66.   // 执行一些动作...
  67. })
  69. <!DOCTYPE html>
  70. <html>
  71.     <head>
  72.         <meta charset="UTF-8">
  73.         <title></title>
  74.   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 
  75. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  76.  <script type="text/javascript" src="js/jquery.min.js"></script>
  77.     <script>
  78.         $(function(){
  79.             $("#myModal").on("show.bs.modal",function(){
  80.             alert("显示模拟窗口");    
  81.             });
  82.             $("#myModal").on("shown.bs.modal",function(){
  83.             alert("模拟窗口完毕");    
  84.             });
  85.             $("#myModal").on("hide.bs.modal",function(){
  86.             alert("隐藏模拟窗口");    
  87.             });
  88.             $("#myModal").on("hidden.bs.modal",function(){
  89.             alert("隐藏模拟窗口完毕");  
  90.             });
  91.         })
  92.     </script>
  93. </head>
  94. <body>
  95.     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">提问</button>
  96.     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="ModelLabel">
  97.   <div class="modal-dialog">
  98.       <div class="modal-header">
  99.         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
  100.         <h4 class="modal-title">提问</h4>
  101.       </div>
  102.       <div class="modal-body">
  103.         <p>问题描述</p>
  104.         <template class="form-control"></template>
  105.       </div>
  106.       <div class="modal-footer">
  107.         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  108.         <button type="button" class="btn btn-primary">提交</button>
  109.       </div>
  110.     </div><!-- /.modal-content -->
  111.  </div><!-- /.modal-dialog -->
  112.  </div>
  113.     </body>
  114. </html>

发表评论

表情：
评论列表 （有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读

    相关 bootstrap模态框实例

    模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 实例： 在这里我...

    系统管理员系统管理员/ 0 赞/ 795 阅读