search

Home  >  Q&A  >  body text

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

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

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

高洛峰高洛峰2909 days ago341

reply all(5)I'll reply

  • 天蓬老师

    天蓬老师2017-04-10 14:42:33

    新出来个,尝试下

    https://github.com/t4t5/sweetalert

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 14:42:33

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    89

    90

    91

    92

    93

    94

    95

    96

    97

    98

    99

    100

    101

    102

    103

    104

    105

    106

    107

    108

    109

    110

    111

    112

    113

    114

    115

    116

    117

    118

    119

    120

    121

    122

    123

    124

    125

    126

    127

    128

    129

    130

    131

    132

    133

    134

    135

    136

    137

    138

    139

    140

    141

    142

    143

    144

    145

    146

    147

    148

    149

    150

    151

    152

    153

    154

    155

    156

    157

    158

    159

    160

    161

    162

    163

    164

    165

    166

    167

    168

    169

    170

    171

    172

    173

    174

    175

    176

    177

    178

    179

    180

    181

    182

    183

    184

    185

    186

    187

    188

    189

    190

    191

    192

    193

    194

    195

    196

    197

    198

    <code>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)

        }

      }

    });

    </code>

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

    msg.css:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    <code> .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

    }

    </code>

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

    2.确认提示框:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    <code>floatNotify.confirm('提示文本','留空扩展',['确定按钮的文本','取消按钮的文本'],

    function(e){

      //callback 处理按钮事件

      var button = $(e.target).attr('class');

      if(button == 'ok'){

        //按下确定按钮执行的操作

        //todo ....

      }

     

      if(button == 'cancel') {

        //按下取消按钮执行的操作

        //todo ....

      }

    });

    </code>

    3.其他的可自行扩展

    reply
    0
  • 阿神

    阿神2017-04-10 14:42:33

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

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-10 14:42:33

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

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

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

    reply
    0
  • PHPz

    PHPz2017-04-10 14:42:33

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

    reply
    0
  • Cancelreply