jquery SweetAlert swal()弹出层插件实现响应式提示框
2019-12-18 15:08:40  By: shinyuu

什么是sweetalert,SweetAlert 是一个 JavaScript 插件,能够完美替代 JavaScript 自带的 alert 弹出框,并且功能强大、设计优美。swal()方法是一个提示框,是SweetAlert框架下面的方法。


使用方法

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");
  }
});


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

若资源对你有帮助,浏览后有很大收获,不妨小额打赏我一下,你的鼓励是维持我不断写博客最大动力。

想获取DD博客最新代码,你可以扫描下方的二维码,关注DD博客微信公众号(ddblogs)。

或者你也可以关注我的新浪微博,了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间,可以对该博文进行评论,希望不吝赐教。

为保证及时回复,可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问,祝你生活愉快、工作顺心、欢迎常来逛逛。


快速评论


技术评论

DD记账
top
+