【HTML/CSS/Javascript】レスポンシブ対応可能なモーダルウィンドウを作成する方法
今回はレスポンシブ対応のモーダルウィンドウの作成方法をまとめてみました。
サンプルページは →→こちら
jQueryとアイコンフォントの読み込み
まず、jQueryとアイコンフォントを読み込みます。インターネット上に公開してくれているので、URLで読み込むことができます。
アイコンフォントは『Material Design Iconic Font』を使用してみました。
Font Awesomeと同じような使い方ができます。以下を参考にしてみてください。
https://www.tipdip.jp/tips_posts/production/1803/
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"> |
HTMLを記述
HTMLを記述します。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div id="demoslide01" class="main_visual bg_aaa"> <p><a data-target="modal1" class="modal_open" rel="noopener noreferrer">クリックするとモーダルウィンドウが開きます</a></p> </div> <div id="modal1" class="modal_box"> <h2>ウィンドウ1</h2> <p>モーダルウィンドウが開きました。</p> <div class="link_area"> <p class="modal_link"><a data-target="modal2" class="modal_switch"><span>ウィンドウ2へ</span></a></p> </div> <p><a class="modal_close"><i class="zmdi zmdi-close"></i></a></p> </div> <div id="modal2" class="modal_box"> <h2>ウィンドウ2</h2> <p>あのイーハトーヴォのすきとおった風、<br />夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、<br />郊外のぎらぎらひかる草の波。<br /> <br />この様にウィンドウの高さが違う場合でも<br />この様に表示することができます。</p> <div class="link_area"> <ul> <li class="modal_link"><a data-target="modal1" class="modal_switch" rel="noopener noreferrer"><span>ウィンドウ1へ</span></a></li> <li class="modal_link"><a data-target="modal3" class="modal_switch" rel="noopener noreferrer"><span>ウィンドウ3へ</span></a></li> </ul> </div> <p><a class="modal_close"><i class="zmdi zmdi-close"></i></a></p> </div> <div id="modal3" class="modal_box"> <h2>ウィンドウ3</h2> <div class="link_area"> <p class="modal_link"><a data-target="modal2" class="modal_switch"><span>ウィンドウ2へ</span></a></p> </div> <p><a class="modal_close"><i class="zmdi zmdi-close"></i></a></p> </div> |
『<a data-target=”〇〇” >』と対応する『<id=”〇〇”>』のモーダルを呼び出しています。
例えば、最初の『<a data-target=”modal1″>』をクリックすると『<div id=”modal1″>』が呼び出されます。
『<a class=”modal_close”>』はモーダルを閉じるボタンです。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
.modal_open{ display: inline-block; margin: 3vw; float: left; } .modal_box { position: fixed; z-index: 7777; display: none; width: 80%; max-width: 840px; margin: 0; padding: 60px 2vw 80px; border: 2px solid #aaa; text-align: center; background: #fff; box-sizing: border-box; } .modal_close { position: absolute; top: 0; right: 0; display: block; width: 62px; font-size: 46px; color: #000; line-height: 62px; text-align: center; background: #e6e6e6; } .modal_close i { line-height: 62px; vertical-align: bottom; } .modal_bg { position: fixed; top: 0; left: 0; z-index: 6666; display: none; width: 100%; height: 120%; background-color: rgba(0,0,0,0.7); } .link_area { overflow: hidden; max-width: 410px; margin: 60px auto 0; text-align: center; } .link_area .modal_link { display: inline; } .link_area .modal_link a { display: inline-block; width: 180px; color: #000; line-height: 2.5; text-decoration: none; margin: 0 10px; background: #e6e6e6; } .link-area ul li.modal_link:first-child a { float: left; } .link-area ul li.modal_link:last-child a { float: right; } @media screen and (max-width: 769px) { /* ウィンドウサイズ769px以下の時のスタイル */ .modal_box { padding: 50px 2vw 40px; } .modal_close { width: 40px; line-height: 40px; font-size: 30px; } .modal_close i { line-height: 44px; } .link_area { margin: 25px auto 0; } .link_area .modal_link a { margin: 15px auto 0; } .link_area ul li.modal_link:first-child a { float: none; margin-top: 0; } .link_area ul li.modal_link:last-child a { float: none; } } |
CSSはクローズボタンのデザイン指定やウィンドウサイズを770pxでレスポンシブ対応するよう切り替えています。
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
$(function(){ // 「.modal_open」をクリックしたらモーダルと黒い背景を表示する $('.modal_open').click(function(){ // 黒い背景をbody内に追加 $('body').append('<div class="modal_bg"></div>'); $('.modal_bg').fadeIn(); // data-targetの内容をIDにしてmodalに代入 var modal = '#' + $(this).attr('data-target'); // モーダルをウィンドウの中央に配置する function modalResize(){ var w = $(window).width(); var h = $(window).height(); var x = (w - $(modal).outerWidth(true)) / 2; var y = (h - $(modal).outerHeight(true)) / 2; $(modal).css({'left': x + 'px','top': y + 'px'}); } // modalResizeを実行 modalResize(); // modalをフェードインで表示 $(modal).fadeIn(); // .modal_bgか.modal_closeをクリックしたらモーダルと背景をフェードアウトさせる $('.modal_bg, .modal_close').off().click(function(){ $('.modal_box').fadeOut(); $('.modal_bg').fadeOut('slow',function(){ $('.modal_bg').remove(); }); }); // ウィンドウがリサイズされたらモーダルの位置を再計算する $(window).on('resize', function(){ modalResize(); }); // .modal_switchを押すとモーダルを切り替える $('.modal_switch').click(function(){ // 押された.modal_switchの親要素の.modal_boxをフェードアウトさせる $(this).parents('.modal_box').fadeOut(); // 押された.modal_switchのdata-targetの内容をIDにしてmodalに代入 var modal = '#' + $(this).attr('data-target'); // モーダルをウィンドウの中央に配置する function modalResize(){ var w = $(window).width(); var h = $(window).height(); var x = (w - $(modal).outerWidth(true)) / 2; var y = (h - $(modal).outerHeight(true)) / 2; $(modal).css({'left': x + 'px','top': y + 'px'}); } // modalResizeを実行 modalResize(); $(modal).fadeIn(); // ウィンドウがリサイズされたらモーダルの位置を再計算する $(window).on('resize', function(){ modalResize(); }); }); }); }); |
フェードイン効果や背景を黒くしたり、モーダルウィンドウを画面の中央に配置する指示をしています。リサイズされる度にモーダルの位置を再計算してくれます。
サンプルページは →→こちら
参考ページ
・https://www.tipdip.jp/tips_posts/production/2090/
・https://www.tipdip.jp/tips_posts/production/1803/
この記事へのコメント