さぁ!検索しよう!

Webサイトの警告画面等で使われているモーダルウィンドウをページの読み込み後に表示させる方法です。

DEMO

HTML

<div id="wrapper">
  <div id="modal">
    <a id="btn" href="#"><i class="fa fa-times"></i></a>
    <span>ようこそ</span>
  </div>
</div>

ポイント

オーバーレイはJavaScriptで生成するため、ここでは定義していません。

CSS

#modal {
  display: none;
  background: #EE6557;
  border-radius: 10px;
  min-height: 200px;
  min-width: 300px;
  line-height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 10;
}

a {
  background: #333;
  border-radius: 50%;
  display: block;
  height: 44px;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 44px;
  z-index: 20;
}

i {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

span {
  color: #fff;
}

.overlay {
  background: rgba(0, 0, 0, .5);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

ポイント

モーダルウィンドウ自体は始めは非表示にしておきます。

#modal {
  display: none;
}

JavaScript

(function() {
  var modal = document.getElementById('modal');
  var overlay = document.createElement('div');
  var wrapper = document.getElementById('wrapper');
  document.body.insertBefore(overlay, wrapper);
  overlay.classList.add('overlay');
  modal.style.display = 'block';
  overlay.style.display = 'block';
  var btn = document.getElementById('btn');
  btn.onclick = function() {
    btn.style.display = 'none';
    modal.style.display = 'none';
    overlay.style.display = 'none';
  }
  overlay.onclick = function() {
    btn.style.display = 'none';
    modal.style.display = 'none';
    overlay.style.display = 'none';
  }
})();

ポイント

即時関数とすることで、ページが読み込まれた直後に関数が実行されます。

(function() {
//処理
})();

オーバーレイをwrapperの前に生成し、overlayというクラスを追加しています。

var overlay = document.createElement('div');
document.body.insertBefore(overlay, wrapper);
overlay.classList.add('overlay');

モーダルウィンドウとオーバーレイにスタイルを追加することで、表示させています。

modal.style.display = 'block';
overlay.style.display = 'block';

ボタンかオーバーレイを押下すると非表示になります。

var btn = document.getElementById('btn');
  btn.onclick = function() {
    btn.style.display = 'none';
    modal.style.display = 'none';
    overlay.style.display = 'none';
  }
  overlay.onclick = function() {
    btn.style.display = 'none';
    modal.style.display = 'none';
    overlay.style.display = 'none';
  }

以上で、ページの読み込み後にモーダルウィンドウを表示させる方法を終わります。