Modal

<button class="pw-btn pw-btn--primary" data-pw-open="#demo-modal">Open the modal</button>

<div class="pw-modal" id="demo-modal" data-pw-modal hidden>
  <div class="pw-modal-box">
    <div class="pw-modal-head">
      <h2>Invite a teammate</h2>
      <button class="pw-close" data-pw-close aria-label="Close"></button>
    </div>
    <div class="pw-modal-body">
      <label class="pw-field">
        <span class="pw-label">Email address</span>
        <input class="pw-input" type="email" placeholder="name@example.com">
      </label>
    </div>
    <div class="pw-modal-foot">
      <button class="pw-btn" data-pw-close>Cancel</button>
      <button class="pw-btn pw-btn--primary" data-pw-close>Send invite</button>
    </div>
  </div>
</div>

<button class="pw-btn" data-pw-open="#demo-modal-sm">Small</button>
<button class="pw-btn" data-pw-open="#demo-modal-lg">Large with long text</button>

<div class="pw-modal pw-modal--sm" id="demo-modal-sm" data-pw-modal hidden>
  <div class="pw-modal-box">
    <div class="pw-modal-head"><h2>Saved</h2><button class="pw-close" data-pw-close aria-label="Close"></button></div>
    <div class="pw-modal-body"><p>Your changes are saved.</p></div>
  </div>
</div>
<div class="pw-modal pw-modal--lg" id="demo-modal-lg" data-pw-modal hidden>
  <div class="pw-modal-box">
    <div class="pw-modal-head"><h2>Terms of service</h2><button class="pw-close" data-pw-close aria-label="Close"></button></div>
    <div class="pw-modal-body" tabindex="0">
      <p>This is sample text to show how a long modal scrolls. The header and the footer stay in place while the middle part moves.</p>
      <p>Use short paragraphs. People read dialogs quickly and want to get back to what they were doing.</p>
      <p>If you have this much to say, ask yourself whether a full page would be better than a dialog.</p>
      <p>The page behind does not scroll while the modal is open, and it does not jump sideways when the scrollbar goes away.</p>
      <p>On phones the modal becomes a sheet that slides up from the bottom of the screen.</p>
      <p>Pressing Esc closes it. So does a click on the dark area around it.</p>
      <p>When it closes, the keyboard focus goes back to the button that opened it.</p>
      <p>That is the end of the sample text.</p>
    </div>
    <div class="pw-modal-foot"><button class="pw-btn pw-btn--primary" data-pw-close>I agree</button></div>
  </div>
</div>

<button class="pw-btn" data-pw-open="#demo-modal-static">Open</button>

<div class="pw-modal pw-modal--sm" id="demo-modal-static" data-pw-modal data-static hidden>
  <div class="pw-modal-box">
    <div class="pw-modal-head"><h2>Session about to end</h2></div>
    <div class="pw-modal-body"><p>You will be signed out in one minute.</p></div>
    <div class="pw-modal-foot">
      <button class="pw-btn" data-pw-close>Sign out</button>
      <button class="pw-btn pw-btn--primary" data-pw-close>Stay signed in</button>
    </div>
  </div>
</div>

<button class="pw-btn pw-btn--danger" id="demo-delete">Delete project</button>
<p class="demo-out" id="demo-confirm-out"></p>

document.getElementById('demo-delete').addEventListener('click', function () {
  Partwise.confirm({
    title: 'Delete this project?',
    text: 'All 12 files in it are deleted too. This cannot be undone.',
    ok: 'Delete', danger: true
  }).then(function (yes) {
    document.getElementById('demo-confirm-out').textContent = yes ? 'You chose Delete.' : 'You chose Cancel.';
  });
});