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

2019年5月8日 / HTML/CSS, Javascript

Pocket

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

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

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

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

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

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

<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">

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

<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&lt;/h2>
  <p>モーダルウィンドウが開きました。&lt;/p>

  <div class="link_area">
   <p class="modal_link">&lt;a data-target="modal2" class="modal_switch">&lt;span>ウィンドウ2へ</span></a></p>
  </div>

  <p><a class="modal_close">&lt;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>&lt;a class="modal_close">&lt;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">&lt;a data-target="modal2" class="modal_switch">&lt;span>ウィンドウ2へ</span></a></p>
 </div>

  <p><a class="modal_close">&lt;i class="zmdi zmdi-close"></i></a></p>
</div>

<p><a data-target="modal1" class="modal_open" rel="noopener noreferrer">クリックするとモーダルウィンドウが開きます</a></p>

</div>

<h2>ウィンドウ1</h2>

<p>モーダルウィンドウが開きました。</p>

<p class="modal_link"><a data-target="modal2" class="modal_switch"><span>ウィンドウ2へ</span></a></p>

</div>

</div>

<h2>ウィンドウ2</h2>

<p>あのイーハトーヴォのすきとおった風、<br />夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、<br />郊外のぎらぎらひかる草の波。<br />　<br />この様にウィンドウの高さが違う場合でも<br />この様に表示することができます。</p>

<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>

</div>

<h2>ウィンドウ3</h2>

<p class="modal_link"><a data-target="modal2" class="modal_switch"><span>ウィンドウ2へ</span></a></p>

</div>

</div>

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

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

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

CSS

.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;
  }
 
}

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

$(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();
      });
    });
  });
});

$(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/

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

レクタングル大

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

HTMLを記述

HTML

CSS

Javascript

【HTML/CSS/Javascript】Facebook埋め込み・レスポンシブ対応

【埋め込みYouTube】YouTube APIを使ってサムネイル画像クリックで再生する方法（レスポンシブ対応）

【HTML/CSS】CSS横並び指定はflexで！calc関数とnth-childで余白調整が便利！