end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

jquery非依存な javascript + html modal

dot install からの写経です

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <style>
    #open, #close { cursor: pointer;
                    width: 150px;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    text-align: center;
                    margin: 16px auto 0; }
    #mask { background: rgba(0, 0, 0, 0.4);
            position: fixed;
            top:0; bottom:0; right:0; left:0;
            z-index: 1; }
    #modal {background: #fff;
            width: 600px;
            padding: 20px;
            border-radius: 4px;
            position: absolute;
            top: 40px;
            left: 0;
            right: 0;
            margin: 0 auto;
            transition: transform 0.4s;
            z-index: 2; }
    #modal.hidden{ transform: translate(0, -500px); }
    
    #mask.hidden { display: none; }
  </style>
</head>
<body>
  <section id="modal" class="hidden">
    <p>
      js-modal js-modal js-modal js-modal js-modal js-modal js-modal 
      js-modal js-modal js-modal js-modal js-modal js-modal js-modal 
      js-modal js-modal js-modal js-modal js-modal js-modal js-modal 
      js-modal js-modal js-modal js-modal js-modal js-modal js-modal 
      js-modal js-modal js-modal js-modal js-modal js-modal js-modal 
      js-modal js-modal js-modal js-modal js-modal js-modal js-modal 
    </p>
    <div id="close">
      hide modal
    </div>
  </section>
  
  <div id="open">
    show modal
  </div>

  <div id="mask" class="hidden"></div>

  <script>
    'use strict';
    {
        const close = document.getElementById('close');
        const modal = document.getElementById('modal');
        const mask = document.getElementById('mask');
        
        document.getElementById('open').addEventListener(
            'click', () => {
                modal.classList.remove('hidden');
                mask.classList.remove('hidden');
            });
        
        close.addEventListener('click', () => {
                modal.classList.add('hidden');
                mask.classList.add('hidden');
            });
        
        mask.addEventListener('click', () => {
            close.click();
        });
    }
  </script>
</body>
</html>