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实现弹出窗口的更多相关文章

  1. bootstrap 解决弹出窗口(modal) 常见问题

    无法使用键盘esc关闭窗口方法: 首先在modal容器的div中增加属性tabindex="-1",其次设置键盘ESC属性keyboard为true: 方法1:使用js打开窗口时 ...

  2. AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框

    AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...

  3. jQuery弹出窗口浏览图片

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...

  4. EasyUI弹出窗口实例

    效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...

  5. 让IE8在win7下面能显示使用window.showmodaldialog弹出窗口的地址状态栏

    问题来源:最近又要对老的系统进行改善,由于用到了window.showmodaldialog这个方法弹出窗口,比如从主界面弹出新增或者修改窗口,如下图所示,显示没有地址栏,进行代码修改还要找到相应的文 ...

  6. java selenium (十二) 操作弹出窗口

    selenium 中如何处理弹出窗口 阅读目录 原理 在代码里, 通过         Set<String> allWindowsId = driver.getWindowHandles ...

  7. JSP弹出窗口和模式对话框

    本文转载于其它blog,在此向本文原创者,致意!    JSP 弹出窗口  一.window.open() 基础知识      1.window.open()支持环境:  JavaScript1.0+ ...

  8. Bootstrap模态弹出窗

    Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...

  9. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

随机推荐

  1. CentOs安装Scrapy出现error: Setup script exited with error: command ‘gcc’ failed with exit status 1错误解决方案

    按照 http://www.1207.me/archives/209.html 的教程安装Scrapy出现了上述错误,但是本身机器已经有了gcc,所以应该是安装包的问题 百度又看到了同博客里的解决方案 ...

  2. Redis 学习笔记

    1 Redis优势 性能极高 – Redis能读的速度是110000次/s,写的速度是81000次/s . 丰富的数据类型 – Redis支持二进制案例的 Strings, Lists, Hashes ...

  3. Android应用程序消息处理机制

    http://download.csdn.net/detail/luoshengyang/6439647 pdf

  4. global--命名空间的使用（一些零散的js方法）

    var GLOBAL = {}; GLOBAL.namespace = function (str) { var arr = str.split('.'), o = GLOBAL; for (var ...

  5. javamail实践

    public static void main(String[] args) throws Exception, Exception { MimeMessage message=new MimeMes ...

  6. >>> FilterDispatcher <<< is deprecated! Please use the new filters!

    在struts2.3.20下,web.xml中使用 会出现*********************************************************************** ...

  7. 深入JVM-有关String的内存泄漏

    什么是内存泄漏?所谓内存泄漏,就是由于疏忽或错误造成程序未能释放已经不再使用的内存的情况,他并不是说物理内存消失了,而是指由于不再使用的对象占据了内存不被释放,而导致可用内存不断减小,最终有可能导致内 ...

  8. hdu 1020 Encoding

    Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Description Given a ...

  9. PInvoke和Marshal的姿势

    PInvoke http://www.mono-project.com/docs/advanced/pinvoke/ https://msdn.microsoft.com/en-us/library/ ...

  10. IOS: 模型面数控制

    你可以先试试 生成之后在虚拟机上运行一下就知道了 不过关键也看手机的好坏 場景 人物 面數的話越少越好(但要保持模型的完整)  貼圖解析度也不要太大 資料越少越好 //================ ...