jquery 自定义alert

来源:互联网 发布:照片加日期软件 编辑:程序博客网 时间:2024/06/11 06:45

前因: 由于在移动设备弹出alert时,特别是在IOS设备中会出现弹出域名的问题,所以自定义弹出框是必要的;
但是遇到一个问题: 自定义 confirm 无法在回调函数中赋值,自义定confirm没有返回Boolean参数,所以在修改或删除时,点击“确定”只有在回调函数中开发

项目开发中是参照如下链接开发:
1: http://www.jb51.net/article/54577.htm
2: https://www.cnblogs.com/ynxrsoft/p/7978279.html

js代码

(function () {  $.MsgBox = {    Alert: function (title, msg) {      GenerateHtml("alert", title, msg);      btnOk(); //alert只是弹出消息,因此没必要用到回调函数callback      btnNo();    },    Confirm: function (title, msg, callback) {      debugger;      GenerateHtml("confirm", title, msg);      btnOk(callback);      btnNo();    }  }  //生成Html  var GenerateHtml = function (type, title, msg) {    var _html = "";    _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';    _html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';    if (type == "alert") {      _html += '<input id="mb_btn_ok" type="button" value="确定" />';    }    if (type == "confirm") {      _html += '<input id="mb_btn_ok" type="button" value="确定" />';      _html += '<input id="mb_btn_no" type="button" value="取消" />';    }    _html += '</div></div>';    //必须先将_html添加到body,再设置Css样式    $("body").append(_html); GenerateCss();  }  //生成Css  var GenerateCss = function () {     //获取当前屏幕的宽度 和高度     var wondWidth = $(window).width();     var wondHeight = $(window).height();     var setWidth = wondWidth * 0.7;     setWidth = setWidth+"px"     var setHeight = wondHeight * 0.2;     setHeight = setHeight+"px"    $("#mb_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',      filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6'    });    $("#mb_con").css({ zIndex: '999999', width: setWidth, position: 'fixed',      backgroundColor: 'White', borderRadius: '15px',top:'30%',left:'40%'    });    $("#mb_tit").css({ display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px',      backgroundColor: '#DDD', borderRadius: '15px 15px 0 0',      borderBottom: '3px solid #009BFE', fontWeight: 'bold'    });    $("#mb_msg").css({ padding: '20px', lineHeight: '20px',      borderBottom: '1px dashed #DDD', fontSize: '13px'    });    $("#mb_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',      border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',      lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微软雅黑'    });    $("#mb_btnbox").css({ margin: '3px 0 10px 0', textAlign: 'center' });//    $("#mb_btn_ok,#mb_btn_no").css({ width: '80px', height: '25px', color: 'white', border: 'none' });    $("#mb_btn_ok,#mb_btn_no").css({ width: '80px', height: '25px', color: '#222', border: 'none' });    $("#mb_btn_ok").css({ backgroundColor: '#168bbb' });    $("#mb_btn_no").css({ backgroundColor: 'gray', marginLeft: '20px' });    //右上角关闭按钮hover样式    $("#mb_ico").hover(function () {      $(this).css({ backgroundColor: 'Red', color: 'White' });    }, function () {      $(this).css({ backgroundColor: '#DDD', color: 'black' });    });    var _widht = document.documentElement.clientWidth; //屏幕宽    var _height = document.documentElement.clientHeight; //屏幕高    var boxWidth = $("#mb_con").width();    var boxHeight = $("#mb_con").height();    //让提示框居中    $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });  }  //确定按钮事件  var btnOk = function (callback) {    $("#mb_btn_ok").click(function () {      $("#mb_box,#mb_con").remove();      if (typeof (callback) == 'function') {        callback();      }    });  }  //取消按钮事件  var btnNo = function () {    $("#mb_btn_no,#mb_ico").click(function () {      $("#mb_box,#mb_con").remove();    });  }})();

项目总使用

<div class="hesvit_form"><form><input name="id" type="hidden" value="${userRel.id}"><input name="userId" type="hidden" value="${userRel.userId}"><input id="remarkName" name="remarkName" value="${userRel.remarkName}" type="text" maxlength="5" placeholder="请输入昵称" /><input id="accountName" name="accountName"  value="${user.userName}" readonly="readonly" type="text" /></form></div><div class="hesvit_btn" onclick="update_data()">保存</div><div class="hesvit_btn" onclick="del_data()">删除</div><script type="text/javascript">// 删除关联function del_data() {$.MsgBox.Confirm("温馨提示", "您确认要删除吗?", function() {       var d = {};      var t = $('form').serializeArray();      $.each(t, function() {        d[this.name] = this.value;      });      $.ajax({        type : "POST",        url :  '${ctx}/wx/userRelation/deleteUserRel',        data : JSON.stringify(d),        dataType: 'json',        contentType: "application/json; charset=utf-8",        success:function(result) {            if(result && result.code == '0') {                var rstdata = result.data;                window.location.href = "${ctx}/wx/userRelation/addButtomUserRelation.wxhtml";            }else {                $.MsgBox.Alert("消息",result.message);            }        },        error : function(XMLHttpRequest, textStatus, errorThrown) {            $.MsgBox.Alert("错误消息","删除失败>:"+textStatus);        }    });});}</script>

jquery 默认confirm

 var choice = confirm("您确认要删除吗?", function() {    }, null);    if(choice){    }