【パーツ】モーダル【ショートカット用】

モーダルの見た目編

スタンダードなモーダル

モーダルが出ている時にコンテンツのスクロールができる。

See the Pen モーダル by kbyt (@kbo58) on CodePen.

スタンダードなモーダルその２

モーダルが出ている時にコンテンツのスクロールができない。

See the Pen Untitled by kbyt (@kbo58) on CodePen.

背景とモーダルのHTMLをセットにしたもの

スクリーンを空のタグで作らずにモーダルと一緒にしたもの

See the Pen 背景とモーダルセットにしたもの by kbyt (@kbo58) on CodePen.

中身の多い時のモーダル(モーダルの中身はスクロール化)

See the Pen 中身の多いモーダル by kbyt (@kbo58) on CodePen.

画像のモーダル

画像をクリックすると拡大画像になる

See the Pen 画像のモーダル by kbyt (@kbo58) on CodePen.

モーダルのアレンジ

モーダルに「閉じるボタン」がついたもの

See the Pen Untitled by kbyt (@kbo58) on CodePen.

スクリーンに「閉じるボタン」がついたもの

See the Pen Untitled by kbyt (@kbo58) on CodePen.

Pro◯ate風

某学習サイトのモーダル

基本を忘れたら見直す用ってことで勘弁

See the Pen Pro◯ate風モーダル by kbyt (@kbo58) on CodePen.