jQuery實現(xiàn)消息彈出框效果

更新時間：2019年12月10日 15:23:57 作者：蚩尤后裔

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)消息彈出框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery消息彈出框的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

實現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官網(wǎng)地址：http://www.bootcdn.cn/-->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 
  <style type="text/css">
    .showMessage {
      padding: 5px 10px;
      border-radius: 5px;
      position: fixed;
      top: 45%;
      left: 45%;
      color: #ffffff;
    }
 
    .showMessageSuccess {
      background-color: #00B7EE;
    }
 
    .showMessageError {
      background-color: #ff0000;
    }
  </style>
 
  <script type="text/javascript">
    $(function () {
 
      $("#refresh1").click(function () {
        showMessage("注冊成功",1);
      });
 
      $("#refresh2").click(function () {
        showMessage("您的網(wǎng)絡已斷開!",0);
      });
    });
 
    /**
     * 彈出消息提示框，采用瀏覽器布局，位于整個頁面中央，默認顯示3秒
     * 后面的消息會覆蓋原來的消息
     * @param message：待顯示的消息
     * @param type：消息類型，0：錯誤消息，1：成功消息
     */
    function showMessage(message, type) {
      let messageJQ = $("<div class='showMessage'>" + message + "</div>");
      if (type == 0) {
        messageJQ.addClass("showMessageError");
      } else if (type == 1) {
        messageJQ.addClass("showMessageSuccess");
      }
      /**先將原始隱藏，然后添加到頁面，最后以600秒的速度下拉顯示出來*/
      messageJQ.hide().appendTo("body").slideDown(600);
      /**3秒之后自動刪除生成的元素*/
      window.setTimeout(function () {
        messageJQ.remove();
      }, 3000);
    }
 
  </script>
</head>
<body>
<button id="refresh1">正確消息</button>
<button id="refresh2">正確消息</button>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: