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@3.0.x/dist/xnew.js"></script>
</head>

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

    function Modal(self) {
      xnew.extend(xnew.Modal, { style: { background: 'rgba(0, 0, 0, 0.1)' }});
      const modal = self;
      xnew({ style: {
        position: 'absolute',
        inset: 0,
        width: '400px',
        height: '300px',
        margin: 'auto',
        border: 'solid 1px #000',
        borderRadius: '8px',
        background: '#fff',
      }}, (self) => {
        
        xnew.transition((progress) => {
          modal.element.style.opacity = progress;
        }, 300);

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

        // Content
        xnew({ style: {
          margin: '8px',
        }}, () => {
          xnew({ tagName: 'span' }, 'Content');
        });


      });
      
      return {
        close() {
          xnew.transition((progress) => {
            modal.element.style.opacity = 1.0 - progress;
            if (progress === 1.0) {
              modal.finalize();
            }
          }, 300);
        }
      }
    }
  </script>
</body>

</html>