javascript - 手机网站的提示框除了alert有特别的代码吗？

Question

手机网站的提示框除了alert有特别的代码吗？浏览很多手机站弹出提示框都是黑色透明很漂亮，直接使用alert没这个效果。能推荐一个基于jquery的控件吗

PS: 抱歉，忘了说环境了，我使用的是Bootstrap3，它自带的弹出效果不是太好，所以想找个轻量的替代品。

Answer 1

新出来个，尝试下

https://github.com/t4t5/sweetalert

Answer 2

给你一个TAOBAO的，我用的是zepto，应该和jQuery兼容
msg.js:

function compareVersion(v1, v2) {
    v1 = v1.toString().split(".");
    v2 = v2.toString().split(".");
    for (var i = 0; i < v1.length || i < v2.length; i++) {
      var n1 = parseInt(v1[i], 10),
        n2 = parseInt(v2[i], 10);
      if (window.isNaN(n1)) {
        n1 = 0
      }
      if (window.isNaN(n2)) {
        n2 = 0
      }
      if (n1 < n2) {
        return -1
      } else {
        if (n1 > n2) {
          return 1
        }
      }
    }
    return 0
  }

function callback(func, result) {
  var ua = navigator.userAgent,
      isAndroid = (/Android/i).test(ua),
      osVersion = ua.match(/(?:OS|Android)[\/\s](\d+[._]\d+(?:[._]\d+)?)/i)

    if (isAndroid && compareVersion(osVersion, "2.4.0") < 0) {
      setTimeout(function() {
        func && func(result)
      }, 1)
    } else {
      func && func(result)
    }
  }

(function(e) {
  if (void 0 == window.define) {
    var d = {},
      h = d.exports = {};
    e(null, h, d);
    window.floatNotify = window.notification = d.exports
  } else define(e)
})(function(require, exports, module) {
  function e(a) {
    this._options = d.extend({
      mode: "msg",
      text: "\u7f51\u9875\u63d0\u793a",
      useTap: !1
    }, a || {});
    this._init()
  }
  var d = $,
    h = d(window),
    c = d('

<p class="c-float-popWrap msgMode hide"><p class="c-float-modePop"><p class="warnMsg"></p><p class="content"></p><p class="doBtn"><button class="ok">\u786e\u5b9a</button><button class="cancel">\u53d6\u6d88</button></p></p></p>

'),
    m = c.find(".warnMsg"),
    n = c.find(".content"),
    o = c.find(".doBtn .ok"),
    p = c.find(".doBtn .cancel"),
    j = !1,
    f;
  d.extend(e.prototype, {
    _init: function() {
      var a = this,
        b = a._options,
        g = b.mode,
        k = b.text,
        e = b.content,
        f = b.callback,
        l = b.background,
        t = b.btns,
        b = b.useTap ? "tap" : "click",
        i = c.attr("class"),
        i = i.replace(/(msg|alert|confirm)Mode/i, g + "Mode");
      c.attr("class", i);
      l && c.css("background", l);
      k && m.html(k);
      e && n.html(e);
      t && o.html(t[0]);
      t && p.html(t[1]);
      o.off(b).on(b, function(b) {
        f.call(a, b, !0)
      });
      p.off(b).on(b, function(b) {
        f.call(a, b, !1)
      });
      j || (j = !0, d("body").append(c), h.on("resize",
        function() {
          setTimeout(function() {
            a._pos()
          }, 500)
        }))
    },
    _pos: function() {
      var a = document,
        b = a.documentElement,
        g = a.body,
        e, d, f;
      this.isHide() || (a = g.scrollTop, g = g.scrollLeft, e = b.clientWidth, b = b.clientHeight, d = c.width(), f = c.height(), c.css({
        top: a + (b - f) / 2,
        left: g + (e - d) / 2
      }))
    },
    isShow: function() {
      return c.hasClass("show")
    },
    isHide: function() {
      return c.hasClass("hide")
    },
    _cbShow: function() {
      var a = this._options.onShow;
      c.css("opacity", "1").addClass("show");
      a && a.call(this)
    },
    show: function() {
      var a = this;
      f && (clearTimeout(f), f = void 0);
      a.isShow() ? a._cbShow() : (c.css("opacity", "0").removeClass("hide"), a._pos(), setTimeout(function() {
        a._cbShow()
      }, 300), setTimeout(function() {
        c.animate({
          opacity: "1"
        }, 300, "linear")
      }, 1))
    },
    _cbHide: function() {
      var a = this._options.onHide;
      c.css("opacity", "0").addClass("hide");
      a && a.call(this)
    },
    hide: function() {
      var a = this;
      a.isHide() ? a._cbHide() : (c.css("opacity", "1").removeClass("show"), setTimeout(function() {
        a._cbHide()
      }, 300), setTimeout(function() {
        c.animate({
          opacity: "0"
        }, 300, "linear")
      }, 1))
    },
    flash: function(a) {
      var b =
        this;
      opt = b._options;
      opt.onShow = function() {
        f = setTimeout(function() {
          f && b.hide()
        }, a)
      };
      b.show()
    }
  });
  module.exports = new function() {
    this.simple = function(a, b, c) {
      2 == arguments.length && "number" == typeof arguments[1] && (c = arguments[1], b = void 0);
      var d = new e({
        mode: "msg",
        text: a,
        background: b
      });
      d.flash(c || 2E3);
      return d
    };
    this.msg = function(a, b) {
      return new e(d.extend({
        mode: "msg",
        text: a
      }, b || {}))
    };
    this.alert = function(a, b, c) {
      return new e(d.extend({
        mode: "alert",
        text: a,
        callback: b
      }, c || {}))
    };
    this.confirm = function(a, b, c, f) {
      var d = new e({
        mode: "confirm",
        text: a,
        content: b,
        btns:c,
        callback: f
      });
      d.show();
      return d
    };
    this.pop = function(a) {
      return new e(a)
    }
  }
});

用到了公用的样式中的
.hide{display:none}

msg.css:

 .c-float-modePop {
    text-align: center;
    background-color: rgba(23, 23, 23, 0.9)
}
 .c-float-modePop .warnMsg {
    padding: 10px 10px 10px 10px;
    color: #fff
}
 .c-float-modePop .doBtn {
    width: 170px;
    margin: 0 auto
}
 .c-float-modePop button {
    padding: 6px 9px 6px 9px;
    color: #949494;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #404040), color-stop(100%, #2e2e2e));
    border: 0;
    border-radius: 2px
}
 .c-float-shade {
    width: 100%;
    display: block;
    position: absolute;
    z-index: 99;
    background-color: #000;
    opacity: .5;
    top: 0;
    left: 0
}
 .c-float-shade.hide {
    display: none
}
 .c-float-popWrap {
    width: 220px;
    border-radius: 2px;
    z-index: 9999;
    position: absolute;
    overflow: hidden
}
 .c-float-popWrap .c-float-modePop {
    background-color: rgba(51, 51, 51, 0.9);
    border-radius: 2px;
    padding: 15px
}
 .c-float-popWrap .c-float-modePop .warnMsg {
    padding: 0;
    font-size: 14px
}
 .c-float-popWrap .c-float-modePop .content {
    margin-top: 10px
}
 .c-float-popWrap .c-float-modePop .doBtn {
    width: 190px;
    margin-top: 10px
}
 .c-float-popWrap .c-float-modePop button {
    width: 80px;
    height: 30px;
    line-height: 30px;
    color: #444;
    font-size: 14px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #999));
    border: 0;
    border-radius: 2px;
    padding: 0;
    margin: 10px 5px 0
}
 .c-float-popWrap.hide {
    display: none;
    -webkit-box-shadow: none
}
 .c-float-popWrap.show {
    display: block;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3)
}
 .c-float-popWrap.msgMode .c-float-modePop .content,  .c-float-popWrap.msgMode .c-float-modePop .doBtn {
    display: none
}
 .c-float-popWrap.alertMode .c-float-modePop .content {
    display: none
}
 .c-float-popWrap.alertMode .c-float-modePop .doBtn .cancel {
    display: none
}
 .c-float-popWrap.confirmMode .c-float-modePop .content,  .c-float-popWrap.confirmMode .c-float-modePop .doBtn {
    display: block
}

调用方法：
1.自动消失的提示：
floatNotify.simple('提示文本','2000');
2000 为可选参数，即多少毫秒自动消失

2.确认提示框：

floatNotify.confirm('提示文本','留空扩展',['确定按钮的文本','取消按钮的文本'],
function(e){
  //callback 处理按钮事件
  var button = $(e.target).attr('class');
  if(button == 'ok'){
    //按下确定按钮执行的操作
    //todo ....
  }

  if(button == 'cancel') {
    //按下取消按钮执行的操作
    //todo ....
  }
});

3.其他的可自行扩展

Answer 3

jQuery Mobile 自带了提示框啊，你看看文档就好啦

Answer 4

1. 这个问题和手机网站、pc网站没关系，楼主想问的应该是web程序如何弹出提示框。

2. 如果你没有使用任何移动端的web前端框架，那么需要自己手写html和js代码来手动实现弹出提示框。思路是事件触发时候，将隐藏的提示框层显示出来即可。

3. 如果你使用了web前端框架（jquery mobile 、sencha touch等...)，那么这些框架都带有可以直接调用的显示信息框的函数，查看文档直接调用即可。

Answer 5

抱歉，忘了说环境了，我使用的是Bootstrap3，它自带的弹出效果不是太好，所以想找个轻量的替代品。