Antecedent: since the domain name will pop up in mobile devices, especially in IOS devices, it is necessary to customize the pop-up box;
But there is a problem: the custom confirm cannot be assigned in the callback function, and the self defined confirm does not return the Boolean parameter, so when modifying or deleting, click "OK" only to develop in the callback function

In the project development, the following links are used for reference:
1: http://www.jb51.net/article/54577.htm
2: https://www.cnblogs.com/ynxrsoft/p/7978279.html

js code

(function () {
  $.MsgBox = {
    Alert: function (title, msg) {
      GenerateHtml("alert", title, msg);
      btnOk(); //alert is just a pop-up message, so there is no need to use the callback function
      btnNo();
    },
    Confirm: function (title, msg, callback) {
      debugger;
      GenerateHtml("confirm", title, msg);
      btnOk(callback);
      btnNo();
    }
  }


  //Generate 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="determine" />';
    }
    if (type == "confirm") {
      _html += '<input id="mb_btn_ok" type="button" value="determine" />';
      _html += '<input id="mb_btn_no" type="button" value="cancel" />';
    }
    _html += '</div></div>';

    //You must first_ Add html to body, and then set Css Style
    $("body").append(_html); GenerateCss();
  }

  //Generate Css
  var GenerateCss = function () {

     //Get the width and height of the current screen
     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: 'Microsoft YaHei '
    });

    $("#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' });

    //Top right close button hover style
    $("#mb_ico").hover(function () {
      $(this).css({ backgroundColor: 'Red', color: 'White' });
    }, function () {
      $(this).css({ backgroundColor: '#DDD', color: 'black' });
    });

    var _widht = document.documentElement.clientWidth; //Screen width
    var _height = document.documentElement.clientHeight; //Screen height

    var boxWidth = $("#mb_con").width();
    var boxHeight = $("#mb_con").height();

    //Center the prompt box
    $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
  }


  //Confirm button event
  var btnOk = function (callback) {
    $("#mb_btn_ok").click(function () {
      $("#mb_box,#mb_con").remove();
      if (typeof (callback) == 'function') {
        callback();
      }
    });
  }

  //Cancel button event
  var btnNo = function () {
    $("#mb_btn_no,#mb_ico").click(function () {
      $("#mb_box,#mb_con").remove();
    });
  }
})();

Total project use

<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="Please enter a nickname" />
<input id="accountName" name="accountName"  value="${user.userName}" readonly="readonly" type="text" />
</form>
</div>
<div class="hesvit_btn" onclick="update_data()">preservation</div>
<div class="hesvit_btn" onclick="del_data()">delete</div>

<script type="text/javascript">
// Delete Association
function del_data() {

$.MsgBox.Confirm("reminder", "Are you sure you want to delete it?", 
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("news",result.message);
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            $.MsgBox.Alert("Error message","Delete failed>:"+textStatus);
        }
    });

});

}
</script>

jquery default confirm

 var choice = confirm("Are you sure you want to delete it?", function() {
    }, null);
    if(choice){
    }