Skip to main content

modal

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/xnew@4.0.x/dist/xnew.js"></script>
  
</head>

<body>
  <div id="main" style="width: 100%; height: 100%;"></div>
  <script>
    xnew("#main", (self) => {
      xnew(Modal);
      xnew({ tag: 'button' }, 'open').on('click', () => xnew(Modal));
    });

    function Modal(modal) {
      xnew.extend(xnew.Modal);
      modal.element.style.background = 'rgba(0, 0, 0, 0.1)';

      xnew.transition((x) => {
        modal.element.style.opacity = x;
      }, 500, 'ease');

      xnew({ style: {
        position: 'absolute', inset: 0, margin: 'auto', width: '400px', height: 'max-content',
        border: 'solid 1px #000', borderRadius: '8px', background: '#fff',
      }}, (self) => {

        // Title Bar
        xnew({ style: {
          padding: '8px', borderBottom: 'solid 1px #000',
          display: 'flex', justifyContent: 'space-between',
        }}, (self) => {
          xnew({ tag: 'span' }, 'Title');
          xnew({ tag: 'button' }, 'Close').on('click', () => modal.close());
        });

        // Content
        xnew({ style: { padding: '8px' }}, (self) => {
          xnew({ tag: 'span' }, 'Content');
          xnew({ tag: 'ul' }, () => {
            xnew({ tag: 'li', }, '1st item');
            xnew({ tag: 'li', }, '2nd item');
            xnew({ tag: 'li', }, '3rd item');
          });
        });
      });
      
      return {
        close() {
          xnew.transition((progress) => {
            modal.element.style.opacity = 1 - progress;
          }, 500, 'ease').next(() => {
            modal.finalize();
          });
        }
      }
    }
  </script>
</body>

</html>