點選頂部彈出提示層程式碼例項

antzone發表於2017-04-12

本章節分享一段程式碼例項，它實現在網頁頂部彈出提示層的效果。

根據引數的設定可以設定提示的是普通訊息，還是警告訊息，也能夠設定提示層的顯示時間。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="author" content="http://www.softwhy.com/" />
  <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地址是softwhy.com',
          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>

相關文章