全面解析Bootstrap弹窗的实现方法

作者: 网络应用  发布:2019-09-03

一. 构造分析 

Bootstrap_Javascript_弹窗,bootstrap弹窗

一. 布局深入分析

 

  Bootstrap框架中的模态弹出框,分别使用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其关键又包蕴八个部分:

  ☑ 弹出框尾部,一般选取“modal-header”表示,首要不外乎标题和关闭按键

  ☑ 弹出框主体,一般采取“modal-body”表示,弹出框的重中之重内容

  ☑ 弹出框脚部,一般接纳“modal-footer”表示,重要放置操作按键

<div class="modal" id="mymodal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;Close</button>
        <h4 class="modal-title">模态弹出窗标题</h4>
      </div>
      <div class="modal-body">
        <p>模态弹出窗主体内容</p>
      </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><!-- /.modal -->

 

二 . data-toggle类触发弹窗(没有须求写JS)

  1 . 模态弹出窗表明,只须要自定义八个要求的性质:data-toggledata-target.

<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;Close</button>
        <h4 class="modal-title">模态弹出窗标题</h4>
      </div>
      <div class="modal-body">
        <p>模态弹出窗主体内容</p>
      </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>
  </div>
</div>

 图片 1

 

  2 . data-参数表明

  除了通过data-toggle和data-target来调控模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了别样自定义data-属性,来决定模态弹出窗。

图片 2

 

三 . JS触发弹窗(要写JS)

  1 . 除了行使自定义属性触发模态弹出框之外,还足以因而JavaScript方法来触发模态弹出窗。通过给二个因素八个事件,来触发。举例说给三个按键三个单击事件,然后触发模态弹出窗。

HTML:

<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;Close</button>
        <h4 class="modal-title">模态弹出窗标题</h4>
      </div>
      <div class="modal-body">
        <p>模态弹出窗主体内容</p>
      </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><!-- /.modal -->

 JS:

  $(function(){
    $(".btn").click(function(){
      $("#mymodal").modal("toggle");
    });
  });

 

  2 . 利用JavaScript触发模态弹出窗时,Bootstrap框架提供了某些安装,首要包涵

品质设置:

图片 3

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({
            keyboard:false
        });
    });
});

 

参数设置:

图片 4

 

事件设置:

图片 5

$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

 

四 . 弹窗尺寸

  Bootstrap框架还为模态弹出窗提供了区别尺寸.

  两个是大尺寸样式“modal-lg”.

<divclass="modal-dialog modal-lg">
       <divclass="modal-content"> ... </div>
</div>

  另贰个是小尺码样式“modal-sm”.

<divclass="modal-dialog modal-sm">
       <divclass="modal-content"> ... </div>
</div>

 

一.结构深入分析 Bootstrap框架中的模态弹出框,分别选取了 modal 、 modal-dialog 和 modal-content 样式,而弹出窗真...

  Bootstrap框架中的模态弹出框,分别采取了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的剧情都停放在“modal-content”中,其根本又席卷多个部分:

  ☑ 弹出框尾部,一般采取“modal-header”表示,首要不外乎标题和关闭开关

  ☑ 弹出框主体,一般选用“modal-body”表示,弹出框的要紧内容

  ☑ 弹出框脚部,一般选拔“modal-footer”表示,首要放置操作按键

<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">×Close</button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </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><!-- /.modal -->

二 . data-toggle类触发弹窗(不供给写JS)

1 . 模态弹出窗申明,只须要自定义三个必备的习性:data-toggle和data-target.

<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">×Close</button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </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>
 </div>
</div>

图片 6 

2 . data-参数表明

  除了通过data-toggle和data-target来决定模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来支配模态弹出窗。

图片 7

 三 . JS触发弹窗(要写JS)

  1 . 除了运用自定义属性触发模态弹出框之外,仍是能够透过JavaScript方法来触发模态弹出窗。通过给七个成分三个平地风波,来触发。比方说给三个开关三个单击事件,然后触发模态弹出窗。

HTML:

<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">×Close</button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </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><!-- /.modal -->

JS:

 $(function(){
 $(".btn").click(function(){
 $("#mymodal").modal("toggle");
 });
 });

2 . 使用JavaScript触发模态弹出窗时,Bootstrap框架提供了有的设置,首要不外乎

属性设置:

图片 8

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal({
 keyboard:false
 });
 });
});

参数设置:

图片 9

 事件设置:

图片 10

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})

四 . 弹窗尺寸

Bootstrap框架还为模态弹出窗提供了区别尺寸.

  三个是大尺寸样式"modal-lg”.

<divclass="modal-dialog modal-lg">
 <divclass="modal-content"> ... </div>
</div>

  另三个是小尺码样式"modal-sm”.

<divclass="modal-dialog modal-sm">
 <divclass="modal-content"> ... </div>
</div>

一经大家还想深远学习,能够点击这里实行学习,再为大家附三个完美的专项论题:Bootstrap学习课程 Bootstrap实战教程

上述正是有关Bootstrap弹窗的贯彻格局的一切介绍,希望对大家的就学抱有帮助。

您大概感兴趣的篇章:

  • Bootstrap modal 多弹窗之叠加关闭阴影遮罩难点的消除办法
  • Bootstrap modal 多弹窗之叠合引起的滚动条遮罩阴影难点
  • Bootstrap modal 多弹窗之叠合显示不出弹窗难点的化解方案
  • BootStrap modal模态弹窗使用小结
  • Bootstrap编写贰个在当下网页弹出可关闭的对话框 非弹窗
  • BootStrap的弹出框(Popover)援助鼠标移到弹出层上弹窗层不隐敝的原因及化解办法
  • bootstrap达成弹窗和拖动作效果果
  • weebox弹出窗口不居中显示的消除办法

本文由王中王开奖结果发布于网络应用,转载请注明出处:全面解析Bootstrap弹窗的实现方法

关键词: