3分SHAREツイートシェアはてブGoogle+PocketLINEこんにちは、タクゾウです。仕事で使える、レスポンシブ・可変に対応したモーダルウィンドウを紹介したいと思います。目次DEMOモーダルウィンドウのコード使用方法まとめDEMO作ったものはこちらです。Windowモーダルウィンドウのコードわかりやすいようにコメント多めで書いています。モーダル表示時に固定する要素指定。);//グレー要素を追加。modalWindow('.main');});使用方法モーダル表示時に固定する要素指定を引数に指定し、modalWindow()を実装する。引数には、モーダルを表示時に固定する要素名を指定します。通常は普通に使う場合はbodyで問題ないと思いますが、CMSなどを使うと、レギュレーションでbodyにスタイルを適応できない事があるので、DEMOでは、body直下の「main」クラスのdivを固定する実装にしてあります。css要素固定の記述は任意で変更してください。body直下でモーダルを表示させる場合は「.main」をbodyに変更して下さい。100%;}モーダル内のコンテンツは、htmlの要素を取得する。モーダルのコンテンツは、hmtl内に非表示で記述し、jsで取得しています。DEMOでは、画像とテキストを取得する実装にしています。$(this).find(".mdlDet").text();//詳細を取得$('.modal-cont-img').html(modalImg);//img要素を格納$('.modal-cont-ttl').text(modalTtl);//タイトル格納$('.modal-cont-detail').text(modalDetail);//詳細格納まとめモーダル系の実装はこの記述を基盤に、スタイルでカスタマイズすれば実装に困ることはないかと思います。Web制作を勉強している人の参考になれば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。次の記事jQuery:複数行の文章の文末を三点リーダーにする方法このブログの運営者どうもタクゾウです。このブログは、Web系フロントエンジニアが日々学んだことをまとめて行くブログです。基本的に自分が読み返すようで投稿してますが内容は誰がみてもわかりやすいよう書いています!よろしくお願いします!人気の記事1Wix(ウィックス)はビジネス向きではない。