Ajax发送请求等待时弹出模态框等待提示

主要的代码分为两块，一个是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=" 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