開発中のブラウザゲームのサイトでモーダルを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 最新版