溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹jQuery如何實現消息彈出框效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
本文實例為大家分享了jQuery消息彈出框的具體代碼，供大家參考，具體內容如下
效果圖
實現代碼
<!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 () { $("#refresh2").click(function () { showMessage("注冊成功",1); }); $("#refresh3").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="refresh2">正確消息</button> <button id="refresh3">正確消息</button> </body> </html>
jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
以上是“jQuery如何實現消息彈出框效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
