【ズルいWeb制作】2nd:100万円稼ぐまでの挑戦40【モーダルを作る】

こんにちは、タビんちゅです。

目標はWeb制作で100万円稼ぐ!!

東京フリーランスが無料で提供している30DAYSトライアル(デイトラ)1stを完了し、2ndで学んだことを忘れないうちに書いていきます。

これからデイトラをはじめる人の参考にもなるかもです。

この記事を書いたタビんちゅは、

  • Web制作で稼いで2020年5月のセブ🇵🇭友達の結婚式に絶対行く
  • セブIT留学で大失敗
  • 海外フリーランスを諦められない
  •  #30DAYSトライアル で再挑戦プログラミング中
  • Web制作、フリーランス関連を学んで即発信中

あと記事はサクッと書いているので、誤字脱字があったらすみません。

『2nd:DAY26』を学習中

【今日やること】モーダルを作る

クリックするとウィンドウが浮き上がって表示されるモーダル、これもよく使うらしいので学んでいきます

これが最後の課題!モーダルを作る 

参考サイトのコードをコピペして、あとは少しづつ変更していけばOK。コードを触りつつ理解する感じですね。

参考サイト:

Progate:jQuery中級編(モーダル )

https://prog-8.com/lessons/jquery/study/2

aタグのリンクを無効化する方法

<a href=”javascript:void(0)”></a>

CSSと少しのJSで作るページスクロールできるモーダルウィンドウ

SCSSに

    overflow: auto;

    -webkit-overflow-scrolling: touch;

を付け加えた

https://creatorclip.info/2017/11/scroll-modal-window/

※iOS Safariでfixedした要素のスクロールが出来ない場合の対処法(できてないので保留)

https://glatchdesign.com/blog/fixed-scroll-ios-safari/

ひと口メモ

よし、これで完成!ただsafariで見るとめちゃ崩れる(一旦保留)。実機テストは大変だなあ。

というわけで、今回はここまでです。『プログラミングは継続がいちばん大事。』ではでは。

人気No.1記事