swal() 弹出层的用法

swal()方法是一个提示框;

swal({
		  title: "",
		  text: "请扫描用户手机上的付款码",
		  type: "input",
		  showCancelButton: true,
		  closeOnConfirm: false,
		  cancelButtonText: "取消",
		  confirmButtonText: "确认",
		  imageUrl: "/assets/images/icon/scancode.gif",
		  inputPlaceholder: "请填写付款码数字",
		  showLoaderOnConfirm: true
		},function(inputValue){
			if(inputValue){
				if (inputValue === "") {
				    swal.showInputError("请填写付款码数字");
				    return false
				}else{
					$("input[name=‘authCode‘]").val(inputValue);
					var form = cashierFrom.serialize();
					$.post("/cashier/order", form, function(data) {
						var result = $.parseJSON(data);
						if (result.code == ‘SUCCESS‘) {
							swal({
								title : "支付成功",
								type : "success",
								confirmButtonText : "确定",
								closeOnConfirm : false
							});
						} else {
							if(result.subCode==‘USER_PAYING‘){
								var html = ‘<div class="q-btn-box"><button type="button" class="btn btn-primary waves-effect waves-light">取消</button></div>‘;
								showLoadAlert(‘等待用户输入密码..‘,html);
								var no = result.outTradeNo;
								queryInterval = self.setInterval("cashierOrderQuery(‘"+no+"‘,true)",3000);
							}else{
								swal({
									title : "支付失败",
									type : "error",
									text : result.msg,
									confirmButtonText : "确定",
									closeOnConfirm : false
								});
							}
						}
					});
				}
			}
		});

 swal() 增加确认及取消的方法

swal({
  title: "确认删除?",
  text: "Your will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "确认",
  cancelButtonText: "取消",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
	    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

  可参考地址:

http://www.dglives.com

原文地址:https://www.cnblogs.com/lvxisha/p/9729692.html

时间: 2024-10-22 12:45:15

swal() 弹出层的用法的相关文章

弹出层小插件之(一)sweetalert

//弹出层小插件之(一)sweetalert 1.引入sweetalert.css 2.引入sweetalert.min.js 下载地址:http://t4t5.github.io/sweetalert/ 官网有如下多种你需要的展示效果 More examples In these examples, we're using the shorthand function swal to call sweetAlert. A basic message swal("Here's a message

jQuery弹出层layer插件的使用

引入插件layer 触发弹出层的按钮/链接 <a href="javascript:showPop();"> <img src="" /> </a> 弹出层内容 <div style="display: none"> <div id="attention" style="text-align:left;max-height:5rem;overflow-y:scro

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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

JS简易弹出层手机版

简单说明 手机弹出层模枋了WEIUI.弹出层原理还是依照bootstrap 去掉了PC端的ESC关闭.点击背景层时也不默认关闭. 模板样子 CSS样式 /*弹出时给body加上这个,关闭时去掉*/ .overhide { overflow: hidden; } /*关键样式 遮罩层的*/ .msgboxshadow { position: fixed; /*固定定位*/ left: 0; top: 0; right: 0; bottom: 0; opacity: .5; /*背景透明度.这里没有

2.3 弹出层效果

中心主题:点击按钮的时候触发弹出层,点击弹出框上面的红色叉叉关闭弹出层 一.HTML结构 <div class="maskFuc"> <div class="maskWrap"></div> <div class="mask"> <h2> 我们是遮罩层内容的头部<span>×</span></h2> </div> <button cl

弹出层,阻止页面滚动--阻止事件冒泡

今天要实现一个效果:点击图片后弹出一个浮层,该浮层内容比较多,设置overflow:auto;希望浮层滚动的时候,底层的页面是不动的.在网上查了很多,都没有找到解决方案,有人在问,但是并没有人回答.所以特地跑去问了师傅,在这里分享一下,希望遇到同样问题的小白,可以有所帮助. 首先,把底层页面放在一个div中,包起来,设置它的css样式: 1 #main{ 2 position: fixed; 3 width: 100%; 4 top:0; 5 height:100%; 6 z-index:1;

作品第二课----弹出层

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <style type="text/css"> body, html { height:100%; overflow: hidd

实现一个简单的弹出层

弹出层的实现方式是让一个块层遮挡住最底下的层,在最顶上显示相应的内容,因为最底下的块级和最上面的块级属于一个页面,他们之间也可以共享一些数据(实现一些特定的操作) 下面是简单的一个实现的过程 首先我们定义一个基本的页面结构 <div id="show"> //最底下的层 <input type="button" value="测试" id="test"/> </div> <div id

求出数组中所有数字的和&amp;&amp;弹出层效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-