jQuery實現(xiàn)消息彈出框效果
更新時間：2019年12月10日 15:23:57 作者：蚩尤后裔
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)消息彈出框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery消息彈出框的具體代碼，供大家參考，具體內容如下
效果圖
實現(xiàn)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，BootCDN官網地址：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("您的網絡已斷開!",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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
jquery滾動圖片效果,有些新手朋友可能不是很清楚，今天在網上找到一款回旋滾動效果，拿出來和大家一起分享，感興趣的朋友可以了解下哦2013-01-01
這篇文章主要介紹了JQuery 實現(xiàn)文件下載的常用方法,結合實例形式分析了jQuery的GET方式、POST方式及HTML5 Blob對象等常見的文件下載機制、原理與實現(xiàn)方法,需要的朋友可以參考下2019-10-10
jQuery發(fā)布已經十年了，挺讓人難以置信。過去的這些年Web開發(fā)變了很多，jQuery也隨之變化著。在這個過程中，團隊一直在對確保過往代碼的兼容支持和獲取最好的Web開發(fā)實踐的現(xiàn)實之間努力著。就在2天前，jQuery發(fā)布了新的3.0最終版本2016-06-06
WEB前端開發(fā)都應知道的jquery小技巧及jquery三個簡寫
一個簡單技巧的集合，幫你提升 jQuery 技能，下面腳本之家小編給大家收集整理了web前端開發(fā)都應知道的jquery小技巧，對jquery小技巧感興趣的朋友一起學習吧2015-11-11
ASP.NET jQuery 實例16 通過控件CustomValidator驗證RadioButtonList
上一節(jié)已經介紹過控件CustomValidator的使用方法，下面直接看代碼2012-02-02
jQuery 是我最喜歡的一個Javascript框架，下文中包含了眾多��以為jQuery愛好者們使用的插件。如果你還知道其他的好東西，歡迎與大家分享。2011-08-08
下面就為大家?guī)硪黄狫query針對tr td的一些實用操作方法(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本文主要對jQuery的基礎知識進行介紹，非常適合剛開始接觸JQuery學習的朋友們，下面就跟小編一起來看下吧2016-12-12
jquery實現(xiàn)像柵欄一樣左右滑出式二級菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)像柵欄一樣左右滑出式二級菜單效果代碼,涉及jquery鼠標click點擊事件及頁面元素動態(tài)操作的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果示例
這篇文章主要介紹了jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果,結合實例形式分析了基于jQuery的鼠標事件響應與頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下2016-12-12