#JS 分享 - 原生 Javascript 製作,仿 iOS 吐司訊息!

6月9日 04:42
imgur
-- 預計完成效果 -- 安安,斯咪搭! 今天要來分享的是使用原生 Javascript 製作仿 iOS 吐司訊息, 用簡單的 Js、Css 製作出訊息提示效果! ⚙️ 瀏覽器支援性:
imgur
* IE 10+、Edge、Chrome 8+、Safari 5.1+、FireFox 3.6+;IE 10 以下必須將 classList 更改成 className(或是使用 classList Polyfill )! -- 分隔線 -- Css 部分可根據個人喜好去做調整。 * 基本上只要吐司的背景設定: background-color :rgba( 顏色 , 透明度); 記得將透明度調整過即可(看起來比較不會那麼重)! * 在 偽元素 的部分可以加上: backdrop-filter、filter: blur、opacity 等屬性來調整,讓這一塊吐司有毛玻璃的感覺! * JS Function : function Toast( txt, type , duration ) { // 參數說明: // * txt → string [訊息內容] // * type → string [種類] // * duration → number [持續時間] } -- 分隔線 -- ⌨️ iCon 樣式表(引入 iCon Css 樣式表,可自行更換): cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css ⌨️ Html 代碼: <div class="toast toast--{ 訊息種類 - Type } fadeIn"> <i class=" { 圖標樣式 - iCon.class} "></i> <font> { 訊息內容 - Txt } </font> </div> ⌨️ Css 代碼(Scss): // 吐司的樣式 .toast { position: relative; border-radius: 20px; min-width: 10rem; margin: 1rem; padding: 1.5rem 2rem; text-align: center; user-select: none; transition: 0.125s; z-index: 1; &:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; background-color: inherit; background-attachment: fixed; backdrop-filter: blur(10px); filter: blur(10px); opacity: 0.88; z-index: -1; } // 將吐司定位在頁面正中央 &.float-toast { position: fixed; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); margin: 0; animation-duration: 500ms; z-index: 9999; } &.toast--success { background-color: rgba(darken($success, 20%), 0.48); } // .... 省略其他狀態 } // 隱藏物件 .t-invisible { visibility: hidden; } // 動畫樣式 @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { animation-name: fadeOut; } // Loading 載入動畫 @keyframes spinner { to { transform: rotate(1turn); } } .spinner { margin: 0 auto 0.75rem; width: 4.25rem; height: 4.25rem; border-radius: 50%; padding: 1.5px; background: conic-gradient(#0000 10%, #ffffff) content-box; mask-composite: intersect; animation: spinner 1s infinite steps(10); } ⌨️ Js 代碼(Javascript): function Toast(txt, type, duration) { // 持續時間如果沒有設定則為 3s(秒數) var duration = isNaN(duration) ? 3000 : duration; // 創建一個新的 div 容器 var toast = document.createElement("div"); // 給吐司一個 ID toast.id = "toast"; // 檢查頁面上有沒有吐司,如果有的話先移除(防止重複疊上去) var toast_id = document.getElementById("toast"); if (toast_id) { toast_id.remove(); } // 將吐司增加到 Body 後面 document.body.appendChild(toast); // 判斷 Type,給予不同樣式(Css) switch (type) { // 樣式 Success case "success": toast.className = "toast toast--success float-toast fadeIn"; toast.innerHTML = '<i class="fi fi-rr-time-check" aria-hidden="true"></i>' + '<font>' + txt + '</font>'; break; // 樣式 Error case "error": toast.className = "toast toast--error float-toast fadeIn"; toast.innerHTML = '<i class="fi fi-rr-cross-circle" aria-hidden="true"></i>' + '<font>' + txt + '</font>'; break; // 樣式 Info case "info": toast.className = "toast toast--info float-toast fadeIn"; toast.innerHTML = '<i class="fi fi-rr-info" aria-hidden="true"></i>' + '<font>' + txt + '</font>'; break; // 樣式 Warning case "warning": toast.className = "toast toast--warning float-toast fadeIn"; toast.innerHTML = '<i class="fi fi-rr-shield-exclamation" aria-hidden="true"></i>' + '<font>' + txt + '</font>'; break; // 樣式 Help case "help": toast.className = "toast toast--help float-toast fadeIn"; toast.innerHTML = '<i class="fi fi-rr-interrogation" aria-hidden="true"></i>' + '<font>' + txt + '</font>'; break; // 樣式 Default case "default": toast.className = "toast toast--default float-toast fadeIn"; toast.innerHTML = '<div class="spinner"></div>' + '<font>' + txt + '</font>'; break; } // 定時器:設定時間、添加移除動畫 setTimeout(function () { toast.classList.remove("fadeIn"); toast.classList.add("fadeOut", "t-invisible"); }, duration); } } ⌨️ Js 調用: // Toast( txt , type , duration ) Toast( "訊息內容" , "訊息種類" , "持續時間" ) 🔗 完整代碼 - 範例網址:
愛心
36
留言 17
文章資訊