Bootstrap中过渡效果(Transition)模态框插件的使用案例
通过使用模态框效果实现弹出框的登录效果:
效果图:
![](/assets/blank.gif)
![](/assets/blank.gif)
<form id="formmodal" action="#"><h3>过渡效果(Transition)模态框插件的使用案例:</h3><!--按钮触发模态框--><button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">登录<!--模态框--></button><!--data-backdrop="static/false"点击模态框外不会关闭默认为关闭--><!--data-remote="name.htm"默认是false,如果为有效url的话会将页面嵌入到整个模态框 --><!--data-keyboard="false"是指按键盘上的【esc】无效默认是true则关闭模态框--><div class="modal fade" data-backdrop="static" data-remote="false" data-keyboard="false"data-show="show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModelLabel"aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel"><!--模态框标题-->登录</h4></div><div class="modal-body" style="text-align: center;">用户名:<input type="text" id="txtUserName" /><br /><br />密 码:<input type="text" id="txtPassword" /></div><div class="modal-footer"><button type="button" class="btn btn-primary">重置</button><button type="button" class="btn btn-primary">提交</button></div></div></div></div></form>
View Code
代码讲解[摘录:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html]:
- 使用模态窗口,您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
- 如果您仔细查看上面的代码,您会发现在 <button> 标签中,data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不能在同一时间加载多个模块,但您可以在页面上创建多个在不同时间进行加载。
- 在模态框中需要注意两点:
- 第一是 .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 用于打开模态窗口。
转载于:https://www.cnblogs.com/professional-NET/p/4787467.html
Bootstrap中过渡效果(Transition)模态框插件的使用案例相关推荐
- Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...
- Bootstrap 模态框插件Modal 的选项
选项 Bootstrap模态框插件modal提供了 4 个选项,所有的选项都可以通过 data 属性或 JavaScript 进行设置.见表 5‑1: 表 5‑1 Bootstrap模态框插件moda ...
- Bootstrap 模态框插件Modal 的方法
方法 Bootstrap模态框插件Modal的方法主要用来打开.关闭.隐藏Bootstrap模态框插件Modal: 1..modal(options) 使用一个可选的对象参数 options 调用 B ...
- html模态框插件,如何使用JavaScript构建模态框插件
作为一位Web开发人员而言,模态框(Modal)并不会陌生.就我个人而言,我更为熟悉的是怎么通过CSS来编写一个模态框以及怎么通过CSS给模态框添加一些动效.正好最近工作中也和Modal框杠上了.另外 ...
- 轻量级Modal模态框插件cta.js
今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <se ...
- asp.net mvc 使用bootstrap的模态框插件modal
编译器:vs2012 jquery版本:jquery-1.10.2.js bootstrap:bootstrap.js v3.0.0,包含modal插件 我们要实现一个使用模态框展示从服务器获取的数据 ...
- BootStrap学习(6)_模态框
一.模态框 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...
- bootstrap弹出的模态框水平垂直居中的实现
学习javascript从入门到放弃!,这是第一篇随笔,经验不足,如有不当之处,还望指出.好了废话不多说直接切入正题吧 1.bootstrap默认的model写法: //触发模态框的button &l ...
- IE中window的模态框与返回值
window.returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模态窗口时,用于返回窗 ...
最新文章
- linux中源码编译安装mysql常见错误
- 关于调用 Angular 属性指令 attribute Directive 是否需要带中括号的问题
- 数据挖掘常用的方法(分类,回归、聚类、关联规则)
- Asp.NetCore3.1开源项目升级为.Net6.0
- Java2Days 2012:Java EE
- Redis学习笔记(五) 总结
- 雷军:小米生死靠技术!
- Linux系统日志详解
- FFmpeg总结(十三)用ffmpeg基于nginx实现直播功能,推流拉流
- BZOJ2592: [Usaco2012 Feb]Symmetry
- 怎么查看自己电脑是否被安装远程监控
- 自然语言处理技术发展简史
- TortoiseGit 使用教程
- 2017年西南民族大学程序设计竞赛-网络同步赛
- 互联网晚报 | 9月14日 星期三 | ​理想汽车总裁5天抛售理想100万股港股;微信坚决抵制无底线追星;Phone15要改名?...
- 工作记录 --01 验证证件号合法性!
- md 生成目录 码云_DuangDuangDuang!码云项目的 Readme.md 特殊技能
- redis实现共同好友功能
- 小白UEFI启动如何设置
- 被寄予厚望的跨链,2020能否带来新亮点? | 白话区块链7问跨链
热门文章
- Linux无线网络设置(wpa_supplicant的使用)
- linux 进程开始与终止
- [react] 请说说什么是useRef?
- Taro+react开发(52) 移动端弹出框使用
- react学习(18)----vs 全局搜索
- [css] css中Scroll-behavior属性有什么应用场景?
- 用css画出一个圆圈,里面有个叉号(不能用英文字母x)
- “约见”面试官系列之常见面试题之第一百零四篇之vue优点(建议收藏)
- 前端学习(1925)vue之电商管理系统电商系统之通过一层for循环渲染
- 前端学习(1349):用户的增删改查操作6删除