快捷導(dǎo)航

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

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

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

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

效果圖

實(shí)現(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)絡(luò)已斷開!",0);
      });
    });
 
    /**
     * 彈出消息提示框，采用瀏覽器布局，位于整個(gè)頁面中央，默認(rèn)顯示3秒
     * 后面的消息會(huì)覆蓋原來的消息
     * @param message：待顯示的消息
     * @param type：消息類型，0：錯(cuò)誤消息，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秒之后自動(dòng)刪除生成的元素*/
      window.setTimeout(function () {
        messageJQ.remove();
      }, 3000);
    }
 
  </script>
</head>
<body>
<button id="refresh1">正確消息</button>
<button id="refresh2">正確消息</button>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

滾動(dòng)圖片效果 jquery實(shí)現(xiàn)回旋滾動(dòng)效果
jquery滾動(dòng)圖片效果,有些新手朋友可能不是很清楚，今天在網(wǎng)上找到一款回旋滾動(dòng)效果，拿出來和大家一起分享，感興趣的朋友可以了解下哦
2013-01-01
JQuery 實(shí)現(xiàn)文件下載的常用方法分析
這篇文章主要介紹了JQuery 實(shí)現(xiàn)文件下載的常用方法,結(jié)合實(shí)例形式分析了jQuery的GET方式、POST方式及HTML5 Blob對(duì)象等常見的文件下載機(jī)制、原理與實(shí)現(xiàn)方法,需要的朋友可以參考下
2019-10-10
喜大普奔！jQuery發(fā)布 3.0 最終版
jQuery發(fā)布已經(jīng)十年了，挺讓人難以置信。過去的這些年Web開發(fā)變了很多，jQuery也隨之變化著。在這個(gè)過程中，團(tuán)隊(duì)一直在對(duì)確保過往代碼的兼容支持和獲取最好的Web開發(fā)實(shí)踐的現(xiàn)實(shí)之間努力著。就在2天前，jQuery發(fā)布了新的3.0最終版本
2016-06-06
WEB前端開發(fā)都應(yīng)知道的jquery小技巧及jquery三個(gè)簡寫
一個(gè)簡單技巧的集合，幫你提升 jQuery 技能，下面腳本之家小編給大家收集整理了web前端開發(fā)都應(yīng)知道的jquery小技巧，對(duì)jquery小技巧感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
ASP.NET jQuery 實(shí)例16 通過控件CustomValidator驗(yàn)證RadioButtonList
上一節(jié)已經(jīng)介紹過控件CustomValidator的使用方法，下面直接看代碼
2012-02-02
jQuery的插件列表(2010-1-25更新)
jQuery 是我最喜歡的一個(gè)Javascript框架，下文中包含了眾多��以為jQuery愛好者們使用的插件。如果你還知道其他的好東西，歡迎與大家分享。
2011-08-08
Jquery針對(duì)tr td的一些實(shí)用操作方法(必看篇)
下面就為大家?guī)硪黄狫query針對(duì)tr td的一些實(shí)用操作方法(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
jQuery學(xué)習(xí)筆記之入門
本文主要對(duì)jQuery的基礎(chǔ)知識(shí)進(jìn)行介紹，非常適合剛開始接觸JQuery學(xué)習(xí)的朋友們，下面就跟小編一起來看下吧
2016-12-12
jquery實(shí)現(xiàn)像柵欄一樣左右滑出式二級(jí)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)像柵欄一樣左右滑出式二級(jí)菜單效果代碼,涉及jquery鼠標(biāo)click點(diǎn)擊事件及頁面元素動(dòng)態(tài)操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery實(shí)現(xiàn)的仿百度,仿谷歌搜索下拉框效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的仿百度,仿谷歌搜索下拉框效果,結(jié)合實(shí)例形式分析了基于jQuery的鼠標(biāo)事件響應(yīng)與頁面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12