bootstrap实现弹出窗口
bootstrap使用modal-dialog实现弹对话框。
一个对话框包含3部分：
对话框头部 modal-header
对话框内容体 modal-body
对话框底部 modal-footer
如下html可以放入<body>标签的任何位置，我习惯紧随<body>标签之后。
html代码片段：
<div class="modal fade" id="loginModalId" tabindex="-1" role="dialog" 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">
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">帐号：</span>
<input type="text" class="input-sm" id="loginUser" aria-describedby="basic-addon3" placeholder="admin">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">密码：</span>
<input type="password" class="input-sm" id="loginPassword" aria-describedby="basic-addon3" placeholder="******">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="loginModalYesId">登录</button>
</div>
</div>
</div>
</div>
默认div是隐藏的 aria-hidden="true"
显示效果：
增加一个触发弹出对话框的按钮。
<button type="button" class="btn btn-blue nav-external animated hiding" id="loginBntId" hidden="true">点击登录...</button>
增加js代码，当按钮loginBtnId按下时，显示对话框（$('#loginModalId').modal('show');）。
$(document).ready(function() {
document.getElementById("loginBntId").onclick = function() {
$('#loginModalId').modal('show');
}
document.getElementById("loginModalYesId").onclick = function() {
$('#loginModalId').modal('hide');
alert("登录功能未实现！");
}
});
为对话框上的 登录 按钮增加点击事件，事件发生后隐藏对话框（$('#loginModalId').modal('hide');），并触发登录操作（"登录功能未实现！"）
参考：
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html?from=androidqq
bootstrap实现弹出窗口的更多相关文章
- bootstrap 解决弹出窗口(modal) 常见问题
无法使用键盘esc关闭窗口方法: 首先在modal容器的div中增加属性tabindex="-1",其次设置键盘ESC属性keyboard为true: 方法1:使用js打开窗口时 ...
- AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框
AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...
- jQuery弹出窗口浏览图片
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...
- EasyUI弹出窗口实例
效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...
- 让IE8在win7下面能显示使用window.showmodaldialog弹出窗口的地址状态栏
问题来源:最近又要对老的系统进行改善,由于用到了window.showmodaldialog这个方法弹出窗口,比如从主界面弹出新增或者修改窗口,如下图所示,显示没有地址栏,进行代码修改还要找到相应的文 ...
- java selenium (十二) 操作弹出窗口
selenium 中如何处理弹出窗口 阅读目录 原理 在代码里, 通过 Set<String> allWindowsId = driver.getWindowHandles ...
- JSP弹出窗口和模式对话框
本文转载于其它blog,在此向本文原创者,致意! JSP 弹出窗口 一.window.open() 基础知识 1.window.open()支持环境: JavaScript1.0+ ...
- Bootstrap模态弹出窗
Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...
- [转]js来弹出窗口的详细说明
1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...
随机推荐
- NYOJ 16 矩形嵌套（经典动态规划）
传送门 Description 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a<c,b<d或者b<c,a<d(相当于 ...
- 软件产品案例分析--K米
软件产品案例分析--K米 第一部分 调研,评测 评测 个人第一次上手体验 使用的第一款点歌软件,以为就是个遥控而已,使用后发现功能还挺多,能点挺久.觉得很方便,不用挤成一堆点歌了.K米的脸蛋(UI)好 ...
- hdu 1233 - 还是畅通工程(MST)
还是畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- omnet++5.0安装使用
1.下载Windows安装包,5.0的omnetpp-5.0-src-windows.zip 2.解压到d盘 3.D:\omnetpp-5.0\doc找到这个目录,下面有个InstallGuide.p ...
- SQL Server 2012 学习笔记4
1. 约束 , 给某些字段添加约束条件, 比如年龄在1-100岁之间 添加约束,输入 Age>1 and Age < 100 2. 存储过程 存储过程也可以做增删改查 存储过程的 ...
- js021-Ajax与Comet
js021-Ajax与Comet 本章内容: 使用XMLHttpRequet对象 使用XMLHttpRequet事件 跨域Ajax通信的限制 Ajax技术的核心是XMLHttpRequet对象 21. ...
- javascript基础之打印乘法表
废话不多说,直接上代码!! 代码如下: for(var i =1; i<=9;i++){ for(var j =1; j<=i;j++){ document.write(i+"* ...
- 常用的工具类4-IP类
public static class IpHelper { /// <summary> /// 获取Ip /// </summary> /// <returns> ...
- POI导出Excel的空值问题
情景: 页面上的表格导出Excel,表格没数据导出的空格也要参与运算,结果在Excel上出错了 看图, 行-A.A12是没有数据的,后台代码cell.setCellValue("" ...
- Java数据结构——迭代器