Tutorial : Pure CSS Modal

https://codepen.io/desbear96/pen/oqpwLO

課程目標

主要透過:target辦到讓有特定id之物件達到樣式變換的效果,並在此次了解absolute的位置的概念來產生tooltips,並創造滿版遮罩的概念,在tooltips中可以帶入三角形與透過transform讓物件置中的方式。

學前必備知識

  • box-modal
  • html basic
  • inline-block
  • :hover
  • margin:0 auto

重點知識

  • :target
  • position left top right bottom
  • text-align
  • css triangle
  • psedo element
  • transform:translate3d basic

教學方式

  • 先教導創造按鈕並解釋box-modal與inline-block
  • 透過body的text-align來讓按鈕置中
  • 創造a之中的tooltips結構
  • 並透過psedo element創造三角形的部分
  • 在解釋hover後讓子物件作指定除了自己以外的物件作樣式變換後
  • 進一步開始解釋target之用法
  • 先將modal card與overlayer創造出來
  • 將modal card隱藏
  • 將modal card用target設定樣式滑入
  • 創造關閉按鈕reset 網址列

注意

不要透過transform來將modal or card置中

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *