築夢角落

致力於用最生活化的例子讓所有人都能懂程式,也喜歡分享動漫、小說心得,以及自己的所見所聞、所思所想。

[javascript]輕鬆自訂Alert滑動視窗樣式

最後更新時間 : 2022-09-22 | viewed : 3322

 

想在網站上自己做一個彈出視窗,無論是訊息框、提示框、對話框、警告框,都只要運用一些簡單的 CSS,搭配 javascript 或 jQuery 的滑動動畫,就能做到跟瀏覽器預設的 alert、confirm、prompt 一樣的效果。

此外,因為是自己從零做起的,所以視窗樣式可以很容易隨自己的喜好自訂,動畫效果也是如此。

它的基本思路是,先用 HTML 跟 CSS 排出一個你想要的版型,之後運用 js 或 jQuery,將做好的版型視為一個整體,控制它在畫面上滑動、淡入淡出、顯示或隱藏,只要能做到這點,看上去就像我們平時熟悉的彈出視窗了。

 

 

在上面的範例中,我用<div class="dialog">包覆住所有與彈出框有關的元素。

如此一來,我只要讓<div class="dialog">這個元素滑動、淡入淡出、顯示或隱藏,整個視窗都會跟著一起動作,十分方便。

至於 modal 效果(在視窗彈出時,遮住視窗以外的部份),目前是單獨寫了一個<div class="modal">元素來遮擋畫面,在視窗彈出時顯示它、在視窗關閉時隱藏它。

 

以上只是簡單的範例,旨在提供一個清晰的概念,但實務上還需要進一步改良才能便於使用。

 

試想看看,如果我們的彈出視窗會有很多不同的內容、排版,依照現在的作法,就必須事先寫好所有 dialog 的模板跟內容才行,這些大量相似的程式碼會讓程式難以維護。

另一方面,現在為了實現 modal 效果,特地寫了一個<div>放在那裡,這很容易在專案變大的時候出問題。

因為我們可能會忘記那個<div>的用途,或是不記得曾經寫過,所以在其他地方又寫了一個一模一樣的 modal,導致程式出 bug。

 

所以接下來,我的改良方向會是:

(1) 用 js 將 dialog 改寫成可重複使用的模板,動態加入訊息框內容。

(2) 將實現 modal 的<div>改成動態生成、刪除。

 

大家可以嘗試改良看看,設計出自己覺得最容易使用與維護的彈出視窗。

或者也可以參考我的作法:用模板字串(Template literals)製作可重複使用的元件

 

有任何問題歡迎留言~

希望有幫助到你!

 

 
我要留言!
 

X
暱稱(選填)
email(選填,僅站長可見。)
留言 To:#