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(" ...
随机推荐
- 初识JSLint及建议JS编码风格
可能都或多或少的知道JSLint是一个JavaScript的代码质量工具,一个JavaScript语法检查器和校验器,它能分析JavaScript问题并报告它包含的缺点. 被发现的问题往往是语法错误, ...
- SQL Server编程（03）自定义存储过程
存储过程是一组预编译的SQL语句,它可以包含数据操纵语句.变量.逻辑控制语句等. 存储过程允许带参数: 输入参数:可以在调用时向存储过程传递参数,此类参数可用来向存储过程中传入值(可以有默认值) 输出 ...
- Windows10安装MongoDB
环境:Windows10x64,mongodb-win32-x86_64-2008plus-ssl-3.2.9-signed.msi 步骤: 安装msi文件到D:\ 新建配置文件mongo.confi ...
- SQLServer------解决IP地址登录不了数据库问题
1.找到配置管理器,打开 2.关掉SQLExpress,打开MSSQLServer 3.配置MSSQLServer(启用Named Pipes和TCP/IP) 4.修改TCP/IP属性(端口:1433 ...
- TP中验证码的实现
- HTML学习笔记——box
1> HTML写法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- day4之函数
很快就第4天了,原来人是有惰性的,博客现在就不想写了,真是悲催,坚持,憋住. 函数 def func(name): print(name) func("huihuang") 函数定 ...
- C++ 内存管理与堆栈
/*内存管理与堆栈: * # 一个由C/C++编译的程序占用的内存分为以下几个部分 * 1.栈区:由编译器自动分配释放,数据先进后出 * 2.堆区:由程序员手动分配释放,数据先进先出, * new 和 ...
- PHP mysqli 扩展库(面向对象/数据库操作封装/事务控制/预编译)
1.和mysql扩展库的区别: (1 安全性.稳定性更高 (2 提供了面向对象和面向过程两种风格 2.php.ini 中的 extension=php_mysqli.dll 解除封印 3.面 ...
- redis删除list中指定index的值
Redis的List删除命令: lrem : lrem mylist 0 "value" //从mylist中删除全部等值value的元素 0为全部,负值为从尾部开始. ...