Alert 重写

Posted dcrbook

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Alert 重写相关的知识,希望对你有一定的参考价值。

做多语言的时候发现原生Alert()在测试时不能满足需求,在网上找了一篇文章,记一下

      (function () {
          $.MsgBox = {
              Alert: function (title, msg) {
                  Generatehtml("alert", title, msg);
                  btnOk();  //alert只是弹出消息,因此没必要用到回调函数callback
                  btnNo();
              },
              Confirm: function (title, msg, callback) {
                  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 () {

              $("#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: 400px, position: fixed,
                  backgroundColor: White, borderRadius: 15px
              });

              $("#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: 15px 0 10px 0, textAlign: center });
              $("#mb_btn_ok,#mb_btn_no").css({ width: 85px, height: 30px, color: white, 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();
              });
          }
      })();

肯定的,还需要引入jquery文件

参考地址 https://www.cnblogs.com/soundcode/p/4261832.html



以上是关于Alert 重写的主要内容,如果未能解决你的问题,请参考以下文章

如何控制JS中的alert跳框?

推进学说代码片段

java 代码片段

去除移动端alert/confirm的网址(url)

从片段调用 Google Play 游戏服务

js重写原型对象