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. Code笔记 之：注册页面验证码

    文章内容包括: 1.验证码制作 -- 中文|字母|数字|…… 2.图文验证码 -- 图片防盗链(PHP而非JS) 3.JS防止右键点击图片 4.input表单输入框不记录输入过的信息 5.CSS+di ...

  2. MATLAB cell & struct

    CELL cell的每个单元都可以存储任何数据,比如传递函数等.当然,存储矩阵更是没有问题的了.但是用cell数据类型之前,要先初始化. a=cell(n,m) 那么就把a初始化为一个n行m列的空ce ...

  3. POJ3612:Telephone Wire

    传送门 一道很棒的DP题目. 裸的DP方程很好搞: $f[i][j]=min \{ f[i-1][k]+ C \times |k-j| +(k-a[i])^2 \}$ 这个复杂度显然无法承受,考虑优化 ...

  4. NOIp 0910 爆零记

    这套题是神犇chty出的. 刚拿到题的时候有点懵逼,因为按照一般的套路第一题都是一眼题,但是看到第一题后想了很多个算法和数据结构好像都不能很好的解决.然后就随手敲了个暴力去看T2. 嗯...文件名是b ...

  5. BZOJ1588[HNOI2002]营业额统计

    传送门 平衡树常规题,给出两种实现算法 Treap版: //OJ 1610 //by Cydiater //2016.9.1 #include <iostream> #include &l ...

  6. 问题导向VS目标导向：领导者要倾向哪种？

    人类进步的驱动: 问题驱动:目标驱动: 两者相互影响: 问题驱动是起点,并且在很多杂乱的问题中只有少数可以转化为目标,从而成为进步的动力:多数问题只是以干扰的形式出现. 问题驱动是被动的,并且常常干扰 ...

  7. C#读写文本文件

    static public string Read(string path) { StreamReader sr = new StreamReader(path,Encoding.Default); ...

  8. PHP责任链设计模式

    <?php //责任链设计模式 /** * 每个对象,储存着对自己上级的引用, * 如果自己处理不了,交给上一级. */ class board{ protected $power=1; pro ...

  9. Android学习笔记——menu

    该工程的功能是实现两个数相乘,并在另外一个Activity中显示计算的结果 以下的代码是MainActivity.java中的代码 package com.example.menu; import a ...

  10. 设计模式学习——策略模式（Strategy Pattern）

    0. 前言 最近在重构公司的一个项目的时候,在抽取DES加密重复部分代码的时候,突然间想起了策略模式,感觉策略模式好像可以应用上,于是重新学习了下策略模式.注:在DES加密中,有DES和TDES算法, ...