点击顶部弹出提示层代码实例

快乐打工仔发布于 5个月前分类：实例代码

本章节分享一段代码实例，它实现在网页顶部弹出提示层的效果。

根据参数的设置可以设置提示的是普通消息，还是警告消息，也能够设置提示层的显示时间。

代码实例如下:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="author" content="http://www.pipipi.net/" />
  <title>犀牛前端部落</title>
  <style>
    ul {
      width: 400px;
      height: 400px;
      margin: 0px auto;
      list-style: none;
      margin-top: 150px;
    }
  </style>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script>
$(function () {
  $.extend({
    Alert: function () {
      var msgWrap = $('<div>').css({
        position: 'fixed',
        top: '0',
        zIndex: '10000',
        width: '30%',
        minWidth: '320px',
        margin: 'auto',
        left: 0,
        right: 0,
        background: '#fff'
      }).appendTo($('body'));

      var removeBtn = $('<div><span>×</span></div>').css({
        extAlign: 'right',
        display: 'none',
        fontSize: '1.5em'
      });

      removeBtn.find('span').css({
        cursor: 'pointer',
        display: 'inline-block',
        padding: '0 10px'
      }).on('click', function () {
        msgWrap.find('.msg').remove();
        removeBtn.hide();
      });

      removeBtn.appendTo(msgWrap);

      msgWrap.hover(function () {
        removeBtn.slideDown();
      }, function () {
        removeBtn.slideUp();
      });

      return function (msg, goodNews, showTime) {
        var options = {
          msg: msg || '本站url地址是pipipi.net',
          goodNews: $.type(goodNews) == 'boolean' ? goodNews : true,
          howTime: showTime
        };

        if ($.type(msg) == 'object') for (var i in msg) options[i] = msg[i];
        options.howTime = options.howTime || (options.goodNews ? 1000 : 5000);

        var msgDiv = $('<div class="msg">').css({
          padding: '10px',
          background: options.goodNews ? '#DEFCD5' : '#F1D7D7',
          color: options.goodNews ? '#52A954' : '#A95252',
          fontWeight: '900',
          textAlign: 'center',
          overflow: 'hidden',
          display: 'none',
          boxShadow: '2px 2px 7px #CCC'
        }).text(options.msg).appendTo(msgWrap);

        msgDiv.slideDown(function () {
          setTimeout(function () {
            msgDiv.slideUp(300, function () {
              msgDiv.remove();
            });
          }, options.howTime);
        });
      }
    }()
  });
});
  </script>
</head>
<body>
  <ul>
    <li><a href="javascript:$.Alert('犀牛前端部落一')">好消息显示效果</a></li>
    <li><a href="javascript:$.Alert('犀牛前端部落二',false)">坏消息显示效果</a></li>
    <li><a href="javascript:$.Alert('犀牛前端部落三',true,300)">能够显示300毫秒的好消息</a></li>
    <li><a href="javascript:$.Alert('犀牛前端部落四',false,30000)">显示30秒</a></li>
  </ul>
</body>
</html>

我来回复

暂无回复内容