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="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发送请求等待时弹出模态框等待提示的更多相关文章
- 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页（二）前端修改、添加表格行点击弹出模态框
在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...
- bootstrap弹出模态框会给body加padding的解决方法
bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...
- JavaScript：用JS实现加载页面前弹出模态框
用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...
- 【Vue | ElementUI】Vue离开当前页面时弹出确认框实现
Vue离开当前页面时弹出确认框实现 1. 实现目的 在某种业务场景下,用户不允许跳转到其他页面.于是,需要在用户误操作或者是点击浏览器跳转时提示用户. 2. 实现原理 使用路由守卫beforeRout ...
- PLSQL 登录时弹出(没有登录)空白提示框
如题,在登录的时候莫名出现了plsql登录时弹出(没有登录)的空白提示框,在网上找了很多方法之后都不行,然后发现plsql的 oracle主目录名莫名的成了空,然后直接重新把它的目录设置上 重启pls ...
- bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
- bootstrap-table：操作栏点击编辑按钮弹出模态框修改数据
核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...
- 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 ...
- ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题
前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...
随机推荐
- Spark Streaming和Kafka整合保证数据零丢失
当我们正确地部署好Spark Streaming,我们就可以使用Spark Streaming提供的零数据丢失机制.为了体验这个关键的特性,你需要满足以下几个先决条件: 1.输入的数据来自可靠的数据源 ...
- js 性能篇--dom 重绘 重排 节流
浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构: DOM树 -------- 表示页面结构 渲染树 -------- 表示DOM节点如何显 ...
- 忽略Git钩子
https://blog.csdn.net/alps1992/article/details/80464700 pre-commit GIT_DIR/hooks/pre-commit 这个钩子被 gi ...
- 设计模式のMementoPattern（备忘录模式）----行为模式
一.产生背景 意图:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态. 主要解决:所谓备忘录模式就是在不破坏封装的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态, ...
- 转://如何创建ASM磁盘
1 前言 无论是安装单机版的asm还是rac都离不开ASM磁盘组的创建,创建ASM磁盘组的关键是创建好需要的asm磁盘,发现很多网友安装grid软件和grid实例,都在磁盘的创建这里有很大的问题,本 ...
- MYSQL动态查询拼接的表名的SQL脚本实现（MYSQL动态执行SQL脚本）
可以使用MYSQL的预处理逻辑:https://dev.mysql.com/doc/refman/8.0/en/sql-syntax-prepared-statements.html 例如: pr ...
- iptables 设置端口转发/映射
iptables 设置端口转发/映射 服务器A有两个网卡 内网ip:192.168.1.3 外网ip:10.138.108.103 本地回环:127.0.0.1 服务器B有网卡,8001提供服务 内网 ...
- 【vue】vue +element 搭建项目，组件之间通信
父子组件通信 父 通过props属性给 子传递数据 子 操作 父 this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...
- 【vue】vue +element 搭建项目，vuex中的store使用
概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...
- Python框架学习之Flask中的常用扩展包
Flask框架是一个扩展性非常强的框架,所以导致它有非常多的扩展包.这些扩展包的功能都很强大.本节主要汇总一些常用的扩展包. 一. Flask-Script pip install flask-scr ...