モーダルの実装 | デスアンドバース

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

コメントを残す

メールアドレスが公開されることはありません。