コピペで実装！モーダルウィンドウのサンプル［HTML / CSS / jQuery］
posted : 2018.06.06
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
モーダルウィンドウ（ポップアップウィンドウ）の実装はついついプラグインに頼りがちですが、そういったものに頼らずに実装するケースもあります。
その度に一からコーディングするのも少し手間なので自分用も兼ねてプレーンなモーダルウィンドウのサンプルコードを残しておきます。
プレーンなモーダルウィンドウサンプル
モーダルにも色々な仕様があるので実際は仕様に合わせたカスタマイズが必要になると思いますが、本当にプレーンなもので良ければ↓のコードそのままでもいいかと。
必要に応じて各指定を要カスタマイズです。
最低限ですが、領域外クリックでモーダルを閉じる機能のみ付けています。
See the Pen pure modal by mycreatesite (@mycreatesite) on CodePen.
↑をカスタマイズしたものがこのサイトのヘッダーナビ「What’s new?」に実装してあります（2018/6/7現在）。
CSSアニメーションを付けてレスポンシブ化してあります。
補足
コピペ、と言われてもどこをどうコピペするかわからん！という方もいるかもしれませんのでざっくり補足しておきます。
CodePen「HTML」
モーダルを開くための要素には必ず要素にid=”openModal”を付与して下さい。
そして「モーダルエリアここから」「モーダルエリアここまで」部分をHTMLの適当な場所にコピペします。厳密にいうとbodyのケツ寄りの方が良いんですが、まあいいです（適当）。
「body閉じタグ直前でjQueryを読み込む」部分はその通りにします。
CodePen「CSS」
「モーダルCSS」部分以外は関連性薄いのでとりあえず気にしなくていいと思います。
「サイトによってここの数値は調整」部分はまあとりあえずこのままでいいです。z-indexは必要ない場合もあります。
モーダル内でスクロールを有効にしたい場合は後述「補足2」をご参照あれ。
CodePen「JS」
HTMLのjQuery読み込み部分の直後にscriptタグで囲って直接記述するか、外部ファイルで読み込むかして下さい。
補足2：モーダル内コンテンツが多く、スクロールさせたい場合
コンテンツ量によっては、モーダル内スクロールが必要となるケースもあるかと思います。
パパッと実装するなら下記二行をCSS「modalWrapper」クラスに追記するだけ。
CSS(.modalWrapperに追記)
.modalWrapper {
...
height : 50%; //お好みの高さで固定
overflow : auto; //状況に応じて縦スクロールバーが出現
...
}
これで↑のGIFアニメのような挙動になるかと思います。
補足3：モーダル表示時は背景固定したい場合
モーダルのよくある要件として、モーダル表示時は背景を固定したい、というものがあります。
しかしこのメジャーな要件、自分で実装するとなると意外と闇が深かったりします。
いっそプラグインを使ってしまうのが手っ取り早いんですが、自分で実装する場合のポイント・サンプルコードをまとめた記事を書いてみました。
サンプルコードは脱jQueryをテーマにvanilla JSで書いてみました。
完全に釣り気味なタイトルですがこちらも興味があったら読んでみて下さいmm
とそんな感じで、今回メインで紹介したモーダルコードは本当にシンプルなのでカスタマイズもそれなりにしやすいかと勝手に思っております。
よろしければ参考にしてみて下さいませ！
脱jQueryバージョンも作りました
モーダル表示時の背景固定処理
その他コピペ・サンプル系記事
- コピペで簡単！シンプルなローディング画面
- コピペで簡単！超シンプルスライドショー［HTML / CSS / jQuery］
- コピペも可！CSSでラインが一周するホバーアニメーション
- コピペで実装！脱jQueryでも簡単モーダルウィンドウ［HTML / CSS / Javascript］
