w3.cssで作る手軽で軽量なモーダルウィンドウです。下の「モーダルウィンドウ表示」ボタンをクリックすると、背景のオーバーレイの明度を落として、その場にモーダルウィンドウを表示します。表示したモーダルウィンドウの右上の「×」をクリックすると閉じます。

 

サンプルのhtmlソース

<div class="w3-container">
  <div style="width:800px;margin:0 auto;">
    <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black mModal">モーダルウィンドウ表示</button></div>
  <div id="id01" class="w3-modal w3-animate-opacity">
    <div class="w3-modal-content w3-card-4">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id01').style.display='none'" 
        class="w3-button w3-large w3-display-topright">&times;</span>
        <h2>サンプルモーダル Header</h2>
      </header>
      <div class="w3-container">
        <p>サンプルテキスト001-サンプルテキスト001-サンプルテキスト001-サンプルテキスト001-サンプルテキスト001</p>
        <p>サンプルテキスト002-サンプルテキスト002-サンプルテキスト002-サンプルテキスト002-サンプルテキスト002</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>サンプルモーダル Footer</p>
      </footer>
    </div>
  </div>
</div>