初心者でも簡単！モーダルウィンドウの作り方

モーダルウィンドウは、コンテンツを浮かび上がるようにポップアップ表示させることができます。ヘルプやアラートなど、ちょっとしたメッセージを表示するときに、確認ダイアログだとちょっとダサい・・・。そんな時に使えると便利なのがモーダルウィンドウで...

Noith Creative Agency様 初めまして。 突然のご連絡で大変失礼いたします。 この度ご連絡させていただきました、東原と申します。 貴殿のモーダルウィンドウの作り方のサイトを拝見させていただき、 ソースを参考にさせていただいてるのですが、ご質問がありご連絡させていただきました。 主にスマホでモーダルウィンドウを実装したく、実際に実装はできたのですが、 モーダルウィンドウでスクロールさせた時に背景のページもスクロールしてしまいます。 こちらの背景を固定させるためにはサンプルのソースに何を付け加えればいいのかご教授願えれば幸いです。 ※色々自分なりに調べてみたのですが、知識不足で分からずじまいでして。。。 突然の連絡で長々と勝手に不躾な質問をして大変申し訳ございません。 また、勝手なこちらの都合でソース内容や使用サイトなどお伝えできないこと、 重ねて大変申し訳ございません。 もしこういった質問や、問い合わせに対応していない場合は大変失礼いたしました。 以上、何卒よろしくお願い致します。 東原

東原 様 コメントありがとうございます。 ご参考にしていただきありがとうございます。 モーダルウィンドウのスクロール時に背景を固定する方法を追記いたしましたので、よろしければお試しください。 今後もよろしくお願い致します。

Noith Creative Agency様 ご連絡いただきまして、ありがとうございます！ 参考にさせていただき、無事にできました。 本当にありがとうございます。 今後も貴殿のブログ楽しみにしております。 それでは失礼します。 東原

お返事遅くなってしまい申し訳ございません。 ご質問いただいてからお時間が経っておりますので、もしかすると自己解決されているかもしれませんが、念のため回答させていただきます。 cwとchについて、 jQueryのバージョンによっては、outerWidth();、outerHeight();それぞれの引数にを指定した時、不具合を起こします。 var cw = $( “#modal-content” ).outerWidth( ); var ch = $( “#modal-content” ).outerHeight( ); で正しく表示される場合は特に問題ありませんが、不具合が起きる場合は代わりに var cw = $( “#modal-content” ).outerWidth(); var ch = $( “#modal-content” ).outerHeight(); を記述してください。 なお、当ページのサンプルコードでは、 var cw = $( “#modal-content” ).outerWidth(); var ch = $( “#modal-content” ).outerHeight(); を記述していないとモーダルウィンドウとしては動きますが、コンテンツ部分の幅と高さを取得できずにモーダルコンテンツが画面に見えない位置で表示されてしまいます。

はじめましていつも勉強させて頂いてます！ 一つのhtml内にモーダルウィンドウのリンクが複数（1000近く）必要で そのリンク毎に異なる情報のモーダルウィンドウを表示したいのですが、 （数字データなどをモーダルウィンドウ側に渡したいです） その場合何か方法などはございますでしょうか？ ご存知でしたらご教示頂けますと幸いです。 宜しくお願い致します。

はじめまして。 コメントありがとうございます！ 詳細がわかりませんので具体的なところはお伝えできませんが、data属性などをうまく活用すれば実現できるのではないでしょうか？ コードなど詳細がもう少しわかれば、具体的なご提案ができるかと思いますので、必要でしたらメールかChatWorkにてご相談ください。