【HTML/CSS/Javascript】レスポンシブ対応可能なモーダルウィンドウを作成する方法

Pocket

今回はレスポンシブ対応のモーダルウィンドウの作成方法をまとめてみました。

サンプルページは →→こちら

jQueryとアイコンフォントの読み込み

まず、jQueryとアイコンフォントを読み込みます。インターネット上に公開してくれているので、URLで読み込むことができます。

アイコンフォントは『Material Design Iconic Font』を使用してみました。

Font Awesomeと同じような使い方ができます。以下を参考にしてみてください。
https://www.tipdip.jp/tips_posts/production/1803/

HTMLを記述

HTMLを記述します。

HTML

『<a data-target=”〇〇” >』と対応する『<id=”〇〇”>』のモーダルを呼び出しています。

例えば、最初の『<a data-target=”modal1″>』をクリックすると『<div id=”modal1″>』が呼び出されます。

『<a class=”modal_close”>』はモーダルを閉じるボタンです。

CSS

CSSはクローズボタンのデザイン指定やウィンドウサイズを770pxでレスポンシブ対応するよう切り替えています。

Javascript

フェードイン効果や背景を黒くしたり、モーダルウィンドウを画面の中央に配置する指示をしています。リサイズされる度にモーダルの位置を再計算してくれます。

サンプルページは →→こちら

参考ページ
https://www.tipdip.jp/tips_posts/production/2090/
https://www.tipdip.jp/tips_posts/production/1803/

この記事が気に入ったら
いいね ! しよう

Twitter で

この記事へのコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です