您的位置: 首页  >  IT文章  >  《玩转Bootstrap（JS插件篇）》笔记 导入JavaScript插件 动画过渡 模态弹出框

《玩转Bootstrap（JS插件篇）》笔记 导入JavaScript插件 动画过渡 模态弹出框

分类: IT文章 • 2022-08-14 00:24:41

不论是单独导入还一次性导入之前必须先导入jQuery库。

  • 一次性导入
    <script src="js/bootstrap.min.js"></script>

  • 单独导入，可到github去下载
    动画过渡（Transitions）: transition.js
    模态弹窗（Modal）: modal.js
    下拉菜单（Dropdown）： dropdown.js
    滚动侦测（Scrollspy）： scrollspy.js
    选项卡（Tab）： tab.js
    提示框（Tooltips）： tooltop.js
    弹出框（Popover）： popover.js
    警告框（Alert）： alert.js
    按钮（Buttons）： button.js
    折叠/手风琴（Collapse）： collapse.js
    图片轮播Carousel： carousel.js
    自动定位浮标Affix： affix.js

动画过渡

都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果。
默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

  1. 模态弹出窗（Modal）的滑动和渐变效果；
  2. 选项卡（Tab）的渐变效果；
  3. 警告框（Alert）的渐变效果；
  4. 图片轮播（Carousel）的滑动效果。

模态弹出框

模态弹出框统一称为 Modal

  • 结构分析
    分别运用了modal、modal-dialog和modal-content样式
    弹出窗真正的内容都放置在modal-content中，其主要又包括三个部分：
    1 弹出框头部，一般使用modal-header表示，主要包括标题和关闭按钮
    2 弹出框主体，一般使用modal-body表示，弹出框的主要内容
    3 弹出框脚部，一般使用modal-footer表示，主要放置操作按钮

  • 实现原理解析
    bootstrap中的“模态弹出框”有以下几个特点：
    1、模态弹出窗是固定在浏览器中的。
    2、模态弹出窗宽度是自适应的，而且modal-dialog水平居中。
    3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。

  • 尺寸选择
    modal-lg大尺寸
    modal-sm小尺寸（默认）

  • 触发模态弹出窗2种方法
    1、模态弹出窗声明，只需要自定义两个必要的属性：data-toggle（必须为modal）和data-target（ID值）
    2、触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性
    不过建议还是使用统一使用data-target的方式来触发。

  • 为弹出框增加过度动画效果
    可通过给.modal增加类名fade为模态弹出框增加一个过渡动画效果。

  • data参数说明

属性名称 类型 默认值 描述
data-toggle 字符 modal 必须且为modal，用来控制模态弹出窗的显示
data-target 字符 用户自己定义 必须，定义要触发的弹出窗是哪一个。其值可以div.modal元素独有类名，或ID值
data-backdrop 布尔值 true 是否包含一个背景div元素，如果为true，则单击该背景时关闭弹出窗，如果取值为static，则单击背景div时不会关闭
data-keyboard 布尔值 true 按键盘的ESC键可以关闭弹出窗。如果值为false，则不会关闭
data-show 布尔值 true 初始化时，弹出窗是否显示
href URL路径 空值 如果通过a元素触发模态弹出窗，其href值不是一个以#开头的值，则表示是一个url地址，模态弹出窗先加载其内容，然后替换原有的modal-content中的内容。如果href设置了地址，那么data-target则必须填写制定ID值

  • JavaScript触发
    反转(如果当前为显示，则将其关闭；如果为关闭，则将其显示)：$("#themodal").modal("toggle");
    显示：$("#themodal").modal("show");
    关闭：$("#themodal").modal("hide");

  • JavaScript触发时的参数设置

$(function () {
    $(".btn").click(function () {
        $("#mymodal").modal({
            backdrop: false, // 相当于data-backdrop
            keyboard: false, // 相当于data-keyboard
            show: true, // 相当于data-show
            remote: "" // 相当于a标签的href
        });
    });
});
  • JavaScript触发时的事件
    模态弹出窗支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后
事件类型 描述
show.bs.modal 在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件relatedTarget事件
shown.bs.modal 该事件在模态窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件relatedTarget事件
hide.bs.modal 在hide方法调用时（但还未关闭隐藏）立即触发
hidden.bs.modal 该事件在模态弹出窗完全隐藏之后（并CSS动画漂亮完成之后）触发 
$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})
  • 示例
<!-- data-toggle必须为modal -->
<!-- data-target为div.modal元素独有类名，或ID值 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" data-backdrop="static" data-keyboard="false" type="button">通过data-target触发</button>
<!-- 模态弹出窗，由modal、modal-dialog和modal-content组成 -->
<!-- modal-lg大尺寸，还有modal-sm -->
<!-- fade弹出框过度动画效果 -->
<div class="modal fade modal-lg" >
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- modal-header弹出框头部 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <!-- modal-body弹出框主体 -->
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <!-- modal-footer弹出框脚部 -->
            <div class="modal-footer">
                <!--  data-dismiss="modal"关闭模态弹出窗 -->
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

相关推荐