尤川豪   ·  7月前
Exp. 1,778  ·  231 貼文  ·  164 留言

網頁嬰兒自學教材:第3課 ── 親手做一個:互動功能視窗

第3課 課程目標

做出一個會跳出來的視窗,顯示資訊給使用者看。

在這個過程中順便學習更多 JavaScript 與 jQuery 基本知識。

第3課 課程內容

這一課請再多學一點 JavaScript 知識:

接著了解一下使用 jQuery 和不使用 jQuery(直接寫純 JavaScript)的一些語法小差異:

內容不用全部讀懂,只要讀到你覺得能夠做出作業即可。

第3課 作業

這次的作業要做出互動功能視窗,讓網站可以在需要的時候,跳出視窗來給用戶看。

我們來做一個讓用戶可以「訂閱電子報」的功能視窗。

用戶可以點擊「訂閱」按鈕,去打開「訂閱電子報」視窗,裡面有表單可以填 Email 資料。

請參考這份教學,做出基本的畫面蓋板效果:

https://www.w3schools.com/howto/howto_css_overlay.asp

接著請想辦法做出「訂閱按鈕」,並滿足以下4個條件,才算是做完作業:

  • 點擊「訂閱」按鈕,會跳出一個視窗
  • 視窗裡面顯示「歡迎訂閱電子報」
  • 視窗裡面有一個能輸入 Email 的文字欄位、一個 submit 按鈕
  • 視窗裡面有一個「關閉」按鈕,按下可以關閉視窗

完成這些,你就完成這次的課程目標了!

  分享   共 395 次點閱
共有 0 則留言
您的留言