主要的代码分为两块，一个是CSS定义模态框，另一个是在Ajax中弹出模态框。

查看菜鸟教程中的模态框教程demo，http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-modal点击打开链接

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>Bootstrap 实例 - 模态框（Modal）插件</title>

	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<h2>创建模态框（Modal）</h2>

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

	开始演示模态框

</button>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">

					模态框（Modal）标题

				</h4>

			</div>

			<div class="modal-body">

				在这里添加一些文本

			</div>

			<div class="modal-footer">

				<button type="button" class="btn btn-default" data-dismiss="modal">关闭

				</button>

				<button type="button" class="btn btn-primary">

					提交更改

				</button>

			</div>

		</div><!-- /.modal-content -->

	</div><!-- /.modal -->

</div>

</body>

</html>

　　

注意：<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">是写在<body>下一级的。

这里的按钮<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>触发模态框。

我的项目中用的代码：

css部分：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-hidden="true" data-backdrop="true" >

		<div class="modal-dialog" style="display: outline-block;"><span style="font-family: Arial, Helvetica, sans-serif;"><!--设置模态框属性--></span>

			<div class="modal-content" style="width: 400px;height: 80px;margin-top: 220px;margin-left: 130px;"><!--设置模态框content属性-->

				<div class="modal-header" style="text-align:left;font-size: small;height: 8px;margin-bottom: 5px;">

					<!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">

						×

					</button>-->

					<p style="margin-top: -10px;">正在测试数据库连接</p>

				</div>

				<div class="modal-body" style="text-align: center;font-size: large;height: 18px;">

					<p style="margin-top: -15px;">连接中，请稍候...</p>

				</div>

			</div><!-- /.modal-content -->

		</div><!-- /.modal -->

	</div>

　　触发部分：

$.ajax({

					type: 'POST',

					url: 'api/manager/resource/connect/testConnect',

					data: {dbTypeId: dbTypeId, jdbcIp: jdbcIp, jdbcPort: jdbcPort, dbName: dbName, uName: uName, uPwd: uPwd, datadbType: dbType, dbVersion:dbVersion} ,

					dataType: 'json',

					beforeSend: function(){       //ajax发送请求时的操作，得到请求结果前有效

						$('#myModal').modal({

							backdrop:'static'      //<span style="color:#FF6666;">设置模态框之外点击无效</span>

						});

						$('#myModal').modal('show');   //弹出模态框

					},

					complete: function(){            //ajax得到请求结果后的操作

						$('#myModal').modal('hide');  //隐藏模态框

					},

					success: function(msg) {

						if (msg.code == 1) {

//							jAlert('！', '提示');

							$.pnotify({title: "提示",text:"数据库连接正常!",type: 'info', delay: 3000});

						} else {

//							jAlert(msg.msg, '提示');

							$.pnotify({title: "错误",text:msg.msg,type: 'error', delay: 3000});

						}

					}

				});

　　https://blog.csdn.net/qq_30629571/article/details/52758842

Ajax发送请求等待时弹出模态框等待提示的更多相关文章

  1. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页（二）前端修改、添加表格行点击弹出模态框

    在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...

  2. bootstrap弹出模态框会给body加padding的解决方法

    bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...

  3. JavaScript：用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

  4. 【Vue | ElementUI】Vue离开当前页面时弹出确认框实现

    Vue离开当前页面时弹出确认框实现 1. 实现目的 在某种业务场景下,用户不允许跳转到其他页面.于是,需要在用户误操作或者是点击浏览器跳转时提示用户. 2. 实现原理 使用路由守卫beforeRout ...

  5. PLSQL 登录时弹出(没有登录)空白提示框

    如题,在登录的时候莫名出现了plsql登录时弹出(没有登录)的空白提示框,在网上找了很多方法之后都不行,然后发现plsql的 oracle主目录名莫名的成了空,然后直接重新把它的目录设置上 重启pls ...

  6. bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）

    /查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...

  7. bootstrap-table：操作栏点击编辑按钮弹出模态框修改数据

    核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...

  8. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  9. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

随机推荐

  1. ajax工作原理及jsonp跨域详解

    一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...

  2. Redis 的安装 使用 通知事件

    Redis 的安装 使用 介绍: redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string.list.set.zset(sorted ...

  3. android与c#之间scoket获取数据进行赋值显示的问题

    Android端发送的信息为:“手机号码,低压,高压,心率”. 需要实时的将接收到的信息显示到“数据栏”中,但是在执行监听任务的时候,启用了一个主线程,在接收数据的时候直接将数值复制给文本框会出现错误 ...

  4. [TJOI2017]DNA

    嘟嘟嘟 这题怎么想都想不出来,最后还是敲了暴力,喜提40分-- 正解竟然也是暴力-- 用\(s_0\)构造SAM,然后把\(s\)扔上去暴力dfs:记录一个修改次数tot,如果当前不匹配,就tot + ...

  5. 史上最简单的springboot国际化多语言切换实现方案

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 前提: 在resources目录下建立 messages_en_US.properti ...

  6. 008_python列表的传值与传址

    一. 今天发现一个奇怪的现象,代码如下: aList = ['xyz', 'zara', 'abc', 'xyz','xysdfji','xywooudd'] for x in aList: if x ...

  7. nginx如何安装第三方模块

    以安装pagespeed为实例 在未安装nginx的情况下安装nginx第三方模块 # ./configure --prefix=/usr/local/nginx-1.4.1 \ --with-htt ...

  8. postman简介及基本用法

    从分层测试角度来说,接口测试是相对来说性价比最高的,且作为功能测试进阶的必备技能,接口测试值得大家都去学习掌握. 工欲善其事,必先利其器,好的工具能更好的帮助工程师更高效率的完成工作. 常见的接口测试 ...

  9. iis 网页HTTP 错误 404.3 - Not Found解决方案

    一. 1.依次打开控制面板→程序和功能→打开或关闭Windwos功能 2.在打开的Windows功能窗口中依次展开Internet信息服务→万维网服务→应用程序开发功能,将需要的功能选项前面的勾上,确 ...

  10. Linux中断管理 (1)Linux中断管理机制

    目录: <Linux中断管理> <Linux中断管理 (1)Linux中断管理机制> <Linux中断管理 (2)软中断和tasklet> <Linux中断管 ...