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. WPF中ListBox控件在选择模式(SelectionMode)为Single时仍然出现多个Item被选中的问题

    最近在学习WPF过程中使用到了ListBox控件,在使用时遇到下面的奇怪问题: 代码如下: listBox.Items.Add("绘图"); listBox.Items.Add(& ...

  2. 利用css3选择器及css3边框做出的特效(1)

    利用border-radius及box-shadow制作圆角表格 界面效果图如下: css样式如下所示: * { margin:; padding:; } body { padding: 40px 1 ...

  3. JQuery 技巧积累与总结

    1.获得select 元素选中的值 $('#WishlistSelect option:selected').val(); 2.设置按钮的disabled属性的实现代码 $('#button').at ...

  4. Linux Basic --- The First Character in The File Properity

    -rw-r--r-- [d]: content [-]: file [l]: link file [b]: interface device for storage in a device file ...

  5. String.format()用法

    package junit.test;   import java.util.Date; import java.util.Locale;   import org.junit.Test;   pub ...

  6. CentOS6.5 安装Sphinx 配置MySQL数据源

      前提安装完mysql,并创建测试表和数据 DROP TABLE IF EXISTS `documents`; CREATE TABLE IF NOT EXISTS `documents` ( `i ...

  7. Java数据库——事务处理

    在数据库中执行5条SQL语句,这些SQL语句本身需要保持一致,即要么同时成功,要么同时失败 事务基本操作 //============================================= ...

  8. 和安全有关的那些事(非对称加密、数字摘要、数字签名、数字证书、SSL、HTTPS及其他)

    转自http://blog.csdn.net/bluishglc/article/details/7585965 对于一般的开发人员来说,很少需要对安全领域内的基础技术进行深入的研究,但是鉴于日常系统 ...

  9. 安装php时的配置选项

    ./configure --prefix=/home/samba/anthony/web --enable-mbstring --enable-fastcgi --enable-fpm --with- ...

  10. 如何在ubuntu中启用SSH服务

    如何在ubuntu14.04 中启用SSH服务 开篇科普:  SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为 ...