jQuery

プライバシーポリシーなどのコンテンツをモーダルウィンドウで表示させる

2017.10.27

窓

プライバシーポリシーやちょっとした詳細コンテンツはページ遷移して確認するのは何かと面倒だと思います。そんな時はページ内でモーダルウィンドウで表示させるとユーザビリティ的にも良いのではないのかと言うことで、実装方法を紹介しようかと思います。jQueryを使います。

モーダルウィンドウのjQuery部分

いろいろ汎用的に使えるように関数化します。引数に展開するウィンドウのクラスとボタンを指定します。 areaが展開するウィンドウでopenが開くボタンの指定です。

<script>
function modalWindow(area,open){
  var state = false,
  scrollpos,
  modalArea = area,
  modalOpen = open,
  modalBox = $('.' + modalArea),
  modalOpn = $('.' + modalOpen),
  modalOut = $('.modal-close');
  modalOpn.on('click',function () {
    if(state == false) {
      scrollpos = $(window).scrollTop();
      $('body').addClass('fixbody').css({'top': -scrollpos});
      modalBox.fadeToggle(500,"linear");
      state = true;
    }
  });
  modalOut.on('click',function () {
    if(state == true) {
      $('body').removeClass('fixbody').css({'top': 0});
      window.scrollTo( 0 , scrollpos );
      modalBox.fadeToggle(500,"linear");
      state = false;
    }
  });
};
</script>

関数の呼び出しの指定は下記の記述で行います。

<script>
modalWindow('modal-view','modal-btn');
</script>

私は機能とビジュアルを分離させたかったので引数で指定するクラスにはスタイルを記述せず、別途指定したクラスにスタイルを記述しています。

モーダルウィンドウのCSS

ボタンのCSSは置いといてモーダルウィンドウと先ほどの関数でbodyに指定していたfixbodyは関数に合わせて記述する必要があります。

fixbodyでモーダルウィンドウ下のスクロールを止める

addClassでクラスをbodyに付与して、モーダルウィンドウ下のスクロールを止めます。fixbodyには下記を記述します。

.fixbody {
  width: 100%;
  height: 100%;
  position: fixed;
}

モーダル部分のCSS

展開するモーダルウィンドウ部分のCSSです。

背景の指定

モーダルウィンドウの背景になるスタイルです。

.modal-area{
  display: none;
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,.92);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999;
}
ウィンドウ本体のCSS

ちょっと長いですがウィンドウ本体のCSSです。オブジェクトが天地中央に配置されるようにしています。

.modal-area-inner{
  position: relative;
  width:90vw;
  height: 90vh;
  padding:5vw;
  margin: 5vh 5vw;
  background: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-align:center;
  -ms-flex-align:center;
  -webkit-align-items:center;
  align-items:center;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  -webkit-justify-content:flex-center;
  justify-content:center;
  box-shadow:rgba(0, 0, 0, 0.15) 0px 0px 8px 0px;
  -webkit-box-shadow:rgba(0, 0, 0, 0.15) 0px 0px 8px 0px;
  -moz-box-shadow:rgba(0, 0, 0, 0.15) 0px 0px 8px 0px;
  overflow-y: auto;
}

サンプル

下のボタンを押せば紹介したコードのDEMOが確認できます。

ちょっとした工夫でユーザビリティは向上する

冒頭でお話したようにプライバシーポリシーの確認などをモーダルウィンドウで行えば、ページ遷移する必要もないので、ユーザビリティ向上に繋がります。この記事でやったように技術ブログのDEMOなんかも良いかもしれませんね!

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する