
開発中のブラウザゲームのサイトでモーダルをJQueryで実装しました。以下はそのコードです。
HTML側の実装
閉じるボタンに関して、最初は疑似要素で実装していたのですが、EdgeでCSSのcursor: pointer;が効かなかったのでspan要素にしています。
CSS側の実装
簡略化の為に、ベンダープレフィックスは省いています。Edgeに関して、ブラウザ外にはみ出た要素をtransformで内側に戻しても、ブラウザの幅が戻らないので、親要素にoverflow: hidden;を指定してます。
JS側の実装
この実装ではshow()、hide()でモーダルを表示させていますが、アニメーションさせる場合は、これをfadeIn()、fadeOut()に置き換えて表示させます。
URL: deathandbirth.github.io
環境: GitHub Pages・Javascript・Canvas
ジャンル: PCブラウザゲーム・ローグライク
対応ブラウザ: Chrome 最新版