Subscribed unsubscribe Subscribe Subscribe

@peccul is peccu

(love peccu '(emacs lisp cat outdoor bicycle mac linux coffee))

flexboxで画面中央にdivを表示する

試行錯誤しながら、スクロールしても動かない箱を作った。

Demo

See the Pen Floating box by peccu (@peccu) on CodePen.

Codes

Floating box

経緯とか

BootstrapのModalが求めるものだけど、削れるだけ削ってある程度仕組みを知りたかった。

ウィンドウ中央に表示して、ページをスクロールしても場所が変わらなくて、内容の大きさに応じてサイズを調整するものが欲しかった。

あまりドンピシャのものがなかなか見つからなかった。

間違いやより削れる部分があればご指摘いただきたい。

参考にしたところ

css-tricks.com

残課題

  • 内容が画面サイズを越えるとはみ出そう