主要的代码分为两块，一个是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. Android面试题目整理与解说（二）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/bz419927089/article/details/31386787 1.Dalvik和标准Jav ...

  2. 需要熟练的Python知识点

    数据与列表元祖字符串 repr(x) 将对象x转换为表达式字符串 eval(str) 用来计算在字符串中的有效Python表达式,并返回一个对象 unichr(x) 将一个整数转换为Unicode字符 ...

  3. CSAPP：信息的表和处理2

    CSAPP:信息的表和处理2 关键点:浮点数.浮点数运算. 二进制小数IEEE浮点数表示浮点数转换(单精度)参考 二进制小数   形如表示的二进制数,其中每个位的取值范围位0和1.这种表示方式的定义如 ...

  4. ASP.NET API Helper Page 创建并生成相关帮助文档

    创建API项目 修改原工程文件,该行为是为了避免和引入第三方API工程文件冲突 修改发布设置 引入需要生成文档的相关文件,将第三方API依赖的相关文件(XML文件非常重要,是注释显示的关键),复制到文 ...

  5. redis配置环境变量

    直接上图不解释 redis安装路径,我的电脑右击属性 窗口+R键,输入cmd回车,输入redis-server.exe 回车 再开一个命令窗口,窗口+R键,输入cmd回车,输入  redis-cli. ...

  6. 【vue】vue +element 搭建项目，将js函数变成vue的函数

    demo:时间转换 1.目录 <1>在src文件夹下新建文件夹prototypefns--------在此文件夹创建util.js, <2>在prototypefns下新建文件 ...

  7. Python -处理PDF

    处理pdf文档 第一. 从文本中提取文本 第二. 创建PDF 两种方法 #使用PdfFileWriter import PyPDF2 pdfFiles = [] for filename in os. ...

  8. leetcode 153. Find Minimum in Rotated Sorted Array 、154. Find Minimum in Rotated Sorted Array II 、33. Search in Rotated Sorted Array 、81. Search in Rotated Sorted Array II 、704. Binary Search

    这4个题都是针对旋转的排序数组.其中153.154是在旋转的排序数组中找最小值,33.81是在旋转的排序数组中找一个固定的值.且153和33都是没有重复数值的数组,154.81都是针对各自问题的版本1 ...

  9. 项目Alpha冲刺4

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第四天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...

  10. AI 可视化

    可视化 参考链接: http://www.tensorfly.cn/tfdoc/how_tos/summaries_and_tensorboard.html