課程目標

認識並且能實做 alert 元件

課程內容

alert 中文叫「示警」元件,當有訊息要公告在網站上,就可使用

或者當用戶執行了某些動作,在頁面上要提示、回饋訊息的時候,也可使用

通常要將 alert 做成幾種不同樣式,根據不同使用情境來使用

由於 alert 可能會佔據網頁上方、或下方,一整塊長條區域

會有點佔空間,所以通常會多做「關閉」按鈕,方便用戶保持畫面整潔

請上網搜尋 alert ui alert component,四處觀摩一下業界常見的設計

課後作業

請使用 https://jsfiddle.net

用以下 html 為基礎(你可以稍微修改),接著寫出 css 與 js 的部份

<div class="alert alert-primary">
  歡迎您點擊「抖內」按鈕,以實際行動支持我們。
  <button class="btn-close">×</button>
</div>
<hr>
<div class="alert alert-success">
  您已成功下訂單!以下為您的訂單詳細資訊。
  <button class="btn-close">×</button>
</div>
<hr>
<div class="alert alert-danger">
  抱歉,系統發生錯誤,請稍後重新嘗試。
  <button class="btn-close">×</button>
</div>
<hr>
<div class="alert alert-warning">
  請注意,以下內容包含「劇透」爆雷資訊。
  <button class="btn-close">×</button>
</div>

這邊共有四個 alert 元件,各自有不同樣式

primary 用在主要公告事項,呈現藍色

success 用來傳遞讓人安心的成功訊息,呈現綠色

danger 用來提示錯誤訊息,呈現紅色

warning 用來呈現敏感注意事項,呈現橘色

這個顏色變化,可以是邊框、背景顏色、字體顏色、影子顏色,都可以,你自由決定


訊息的旁邊,有一個關閉按鈕,點擊按鈕,要能關閉整個 alert 元件


請稍微加一些 css 屬性,弄得漂亮一點

<hr> 只是方便隔開元素,方便別人查看元件用的,醜醜的留在畫面上沒關係


做出以上功能,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 35 則留言

https://jsfiddle.net/wimp9487/nwcmfypb/18/
交作業!

按讚的人:

少做一個功能

訊息的旁邊,有一個關閉按鈕,點擊按鈕,要能關閉整個 alert 元件

寫得很好,順利完成!