Bootstrap模态框插件
来源:互联网 发布:河南大学软件学院学费 编辑:程序博客网 时间:2024/06/04 01:36
模态框插件:交互式网站常见的弹框功能插件
一、基本使用:
使用模态框的弹窗组件需要三层div容器元素:
- modal(模态声明层)
- dialog(窗口声明层)
- body(主体)
- footer(注脚)
<!-- 模态声明,show表示显示 --><!-- fade设置淡入淡出效果 --><div class="modal show fade" tabindex="-1"> <!-- 窗口声明 --> <!-- 弹窗大小:modal-sm modal-lg --> <div class="modal-dialog"> <!-- 内容声明 --> <div class="modal-content"> <!-- 头部 --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button> <h4 class="modal-title">会员登录</h4> </div> <!-- 主体 --> <div class="modal-body"> <!-- <p>暂时无法登陆会员</p> --> <!-- 在主体部分使用栅格系统中的流体 --> <div class="container-fluid"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> </div> </div> <!-- 注脚 --> <div class="modal-footer"> <button class="btn btn-default">注册</button> <button class="btn btn-primary">登录</button> </div> </div> </div></div>
效果图:
如果模态框(modal)不设置tabindex=”-1”,可以通过tab键切换除模态框外的其他元素的焦点,模态框设置了tabindex=’-1’,tab键只能切换模态框内的元素的焦点。
如果想让模态框自动隐藏,然后通过点击按钮弹窗,那么需要如下操作:
<!-- 模态框去掉 show,增加一个 id --><div class="modal fade" id="myModal" tabindex="-1"><!-- 点击按钮触发模态框显示 --><button class="btn btn-primary btn-lg" id="btn" data-toggle="modal" data-target="#myModal">点击弹窗</button>
二、用法说明
所有插件都是基于Javascript/jQuery的,那么就有四个要素:用法、参数、方法和事件。
用法:通过data属性,如果不是使用button,而是a,其中的data-target也可以使用href=”#myModal”取代,建议使用data-target
//表示触发类型data-toggle="modal"//表示触发的节点 data-target="#myModal"
参数:通过在HTML元素上设置data-*的属性声明来控制效果。
//空白背景且点击不关闭data-backdrop="false"//按下 esc 不关闭 data-keyboard="false"//初始化隐藏,如果是按钮点击触发,第一次点击则无法显示,第二次显示。data-show="false"//加载一次 index.html 到容器内 href="index.html"
也可以在javascript直接设置
$('#myModal').modal({ show : true, backdrop : false, keyboard : false, remote : 'index.html',});
方法:如果不默认显示弹窗,怎样才能通过点击前后弹窗?
//点击显示弹窗$('#btn').on('click', function () { $('#myModal').modal('show');});
事件:模态框支持 4 种事件,分别对应弹出前、弹出后、关闭前和关闭后
阅读全文
0 0
- BootStrap JavaScript插件-模态框
- Bootstrap javascript插件 模态框
- Bootstrap模态框插件
- Bootstrap 模态框插件
- Bootstrap模态框插件
- Bootstrap 模态框(Modal)插件
- BootStrap插件使用之模态框
- bootstrap JavaScript 插件 之 模态框
- Bootstrap 模态框(Modal)插件
- Javascript插件--模态框(Bootstrap)
- Bootstrap 模态框(Modal)插件
- Bootstrap 模态框(Modal)插件
- Bootstrap 模态框(Modal)插件
- Bootstrap 模态框(Modal)插件
- 初涉bootstrap:bootstrap 插件
- Bootstrap 插件
- Bootstrap 插件
- Bootstrap插件
- 访问内容提供者
- AngularJs 自定义表单验证
- php--正则表达式
- STM32F4 IAP BOOTLOADER YMODEM
- 补上上次网络请求没写retrofit
- Bootstrap模态框插件
- mybatis入门中
- IMWeb前端秋招训练营--前端作业6
- Kotlin相关基础及与Java的不同 的 笔记(两)
- 剑指offer 5---从尾到头打印单链表
- Javebean声明boolean类型isXXX解析异常
- 利用jieba对多个中文txt文本进行分词
- nodejs 安装node-sass报错(淘宝镜像安装)
- spring报错:Unexpected exception parsing XML document from class path resource [Beans_annotation.xml]