ページ全体にポップアップ表示する - jQuery

jQueryを利用してウェブブラウザのページ全体にポップアップ表示する動作を実装します。

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <style>
      <!--
      body  {
        padding:0 0 0 0;
        margin:0 0 0 0;
      }

      .section{
        height:480px;
        border:1px solid #ff6a00;
        width:70%;
      }

      .PopupButton{
        text-align:center;
        color:#FFFFFF;
        display: table-cell;
        vertical-align: middle;
        width:160px;
        height:48px;
        background-color:#2673eb;
        border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
        cursor:pointer;
      }

      .popup_section{
        margin:0 0 0 0;
        padding:0 0 0 0;
        position: absolute;;

        background-color:#2673eb;
        color:#FFFFFF;
        width:100%;
        min-height:800px;
        height:100%;
      }
      -->
    </style>

  <script type="text/javascript">
    var scval;

    $(document).ready(function () {
      $('.popup_section').hide();

      $('#PopupButton1').on('click', function () {
        scval = $(window).scrollTop();

        $('#popup_section1').show();
        $('#page').hide();
        $('body, html').scrollTop(0);
      });

      $('#PopupClose').on('click', function () {
        $('#popup_section1').hide();
        $('#page').show();
        $(window).scrollTop(scval);
      });

    })
  </script>
</head>
<body>
  <div id="page">
    <div class="section">section1</div>
    <div class="section">section2</div>
    <div class="section">section3</div>
    <div class="section">section4</div>
    <div class="section">section5</div>
    <div class="section">
      section6
      <div id="PopupButton1" class="PopupButton">Button</div>
    </div>
    <div class="section">section7</div>
    <div class="section">section8</div>
    <div class="section">section9</div>
    <div class="section">section10</div>
    <div class="section">section11</div>
    <div class="section">section12</div>
  </div>

  <div class="popup_section" id="popup_section1">
    popup section1<br/>
    <a id="PopupClose" href="javascript:void(0);">閉じる</a>
  </div>
</body>
</html>

解説

Section6の欄にあるボタンをクリックすると、全画面のポップアップ画面が表示されます。

ボタンのクリックにより下記のコードを実行します。最初の行でwindowオブジェクトのscrollTop()メソッドを呼び出し、スクロールされている位置を保存します。その後、次の行で、全画面のポップアップ領域となる、idが"popup_section1"の要素をshow()メソッドを呼び出して表示状態にします。次行で表示されている元のページの領域となるidが"page" の要素を hide() メソッドを呼び出して非表示にします。この処理によりポップアップ領域が全画面に表示される状態になります。ポップアップ領域の先頭を表示するよう scrollTop(0) を呼び出しスクロールを一番最初に戻します。

  $('#PopupButton1').on('click', function () {
    scval = $(window).scrollTop();

    $('#popup_section1').show();
    $('#page').hide();
    $('body, html').scrollTop(0);
  });

ポップアップ表示領域の[閉じる]リンクをクリックすると下記のコードが実行されます。
最初の行では、全画面のポップアップ領域となる、idが"popup_section1"の要素をhide() メソッドを呼び出して非表示にします。次にページの領域となるidが"page" の要素をshow()メソッドを呼び出して表示します。その後、windowオブジェクトのscrollTop()メソッドを呼び出し、ポップアップ領域を表示する際に取得し、保存したスクロール位置にスクロールします。この処理によりポップアップ領域を開く前のスクロール位置の状態に戻せます。

  $('#PopupClose').on('click', function () {
    $('#popup_section1').hide();
    $('#page').show();
    $(window).scrollTop(scval);
  });

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

ページを下方向にスクロールします。[section6] の枠までスクロールすると、ボタンが配置されています。この「Button]ボタンをクリックします。

ボタンをクリックすると背景が青色の全画面ポップアップ領域が表示されます。

全画面ポップアップ領域の[閉じる]リンクをクリックすると、ポップアップ領域が非表示になり、元のページが表示されます。

以上で全画面表示のポップアップ領域を実装できました。

コード (ポップアップ表示でアニメーションする場合)

先のコードを変更して全画面ポップアップが表示される際にアニメーションするコードを紹介します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <style>
      <!--
      body  {
        padding:0 0 0 0;
                margin:0 0 0 0;
      }

      .section{
        height:480px;
        border:1px solid #ff6a00;
        width:70%;
      }

      .PopupButton{
        text-align:center;
        color:#FFFFFF;
        display: table-cell;
        vertical-align: middle;
        width:160px;
        height:48px;
        background-color:#2673eb;
        border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
        cursor:pointer;
      }

      .popup_section{
        margin:0 0 0 0;
        padding:0 0 0 0;
        position: absolute;;

        background-color:#2673eb;
        color:#FFFFFF;
        width:100%;
        min-height:800px;
        height:100%;
 
        opacity:0;
        transition-duration: .5s;
        transform: translateY(5rem);
      }

      .popup_section.open{
        opacity:1;
        transform: translateY(0rem);

      }
      -->
    </style>

  <script type="text/javascript">
    var scval;

    $(document).ready(function () {
      $('.popup_section').hide();

      $('#PopupButton1').on('click', function () {
        scval = $(window).scrollTop();

        $('#popup_section1').show();
        $('#popup_section1').addClass('open');
        $('#page').hide();
        $('body, html').scrollTop(0);
      });

      $('#PopupClose').on('click', function () {
          $('#popup_section1').hide();
          $('#popup_section1').removeClass('open');

        $('#page').show();
        $(window).scrollTop(scval);
      });

    })
  </script>
</head>
<body>
  <div id="page">
    <div class="section">section1</div>
    <div class="section">section2</div>
    <div class="section">section3</div>
    <div class="section">section4</div>
    <div class="section">section5</div>
    <div class="section">
      section6
      <div id="PopupButton1" class="PopupButton">Button</div>
    </div>
    <div class="section">section7</div>
    <div class="section">section8</div>
    <div class="section">section9</div>
    <div class="section">section10</div>
    <div class="section">section11</div>
    <div class="section">section12</div>
  </div>

  <div class="popup_section" id="popup_section1">
    popup section1<br/>
    <a id="PopupClose" href="javascript:void(0);">閉じる</a>
  </div>

</body>
</html>

解説

先のコードと同様の実行結果になりますが、ポップアップが表示される際にアニメーションで表示されます。

ボタンクリック時の処理も先のコードと同様ですが、show()メソッドでポップアップ領域の要素を表示した後、addClass() メソッドを呼び出し、open サブクラスを追加しています。

  $('#PopupButton1').on('click', function () {
    scval = $(window).scrollTop();

    $('#popup_section1').show();
    $('#popup_section1').addClass('open');
    $('#page').hide();
    $('body, html').scrollTop(0);
  });

クラスのスタイル設定は下記になっております。表示直後の "popup_section" クラスは透明度(opacity)が0で完全透明の状態です。また、transform: translateY(5rem) の設定がされているため、通常の表示位置より 5rem下の位置に枠が表示されます。
transition-duration: .5s の設定により次に指定された状態へ 0.5秒でアニメーションする設定となります。

openサブクラスが追加された、".popup_section.open" では、透明度(opacity)が1で透明でない状態となり、 transform: translateY(0rem) の設定により通常の位置に表示されます。

  .popup_section{
    margin:0 0 0 0;
    padding:0 0 0 0;
    position: absolute;;
    background-color:#2673eb;
    color:#FFFFFF;
    width:100%;
    min-height:800px;
    height:100%;
 
    opacity:0;
    transition-duration: .5s;
    transform: translateY(5rem);
  }

  .popup_section.open{
    opacity:1;
    transform: translateY(0rem);
  }

また、ポップアップ領域を閉じる際には、領域の非表示とスクロール位置の復帰だけでなく、ポップアップ領域に設定されている、".popup_section.open" クラスから、"open" サブクラスを削除する処理も行います。サブクラスの削除はremoveClass()メソッドにより実行します。

  $('#PopupClose').on('click', function () {
    $('#popup_section1').hide();
    $('#popup_section1').removeClass('open');

    $('#page').show();
    $(window).scrollTop(scval);
  });