DOM content + Step flow

// 1) Single popup: show a hidden DOM block inside Layer
$('#openDom').click(function () {
  $.layer({
    title: 'DOM content',
    dom: '#demo_dom_block',
    showCancelButton: true,
    confirmButtonText: 'OK',
    cancelButtonText: 'Close'
  });
});

// 2) Step flow (wizard) - no icon during steps; final summary is allowed
$('#openWizard').click(function () {
  $.layer({
    closeOnClickOutside: false,
    closeOnEsc: false,
    popupAnimation: false,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#444'
  })
  .step({
    title: 'Step 1: Basic info',
    dom: '#wizard_step_1',
    showCancelButton: true,
    cancelButtonText: 'Cancel',
    preConfirm(popup) {
      const name = popup.querySelector('input[name="name"]').value.trim();
      const err = popup.querySelector('[data-error]');
      if (!name) { err.textContent = 'Please enter your name.'; return false; }
      err.textContent = '';
      return { name };
    }
  })
  .step({
    title: 'Step 2: Preferences',
    dom: '#wizard_step_2',
    preConfirm(popup) {
      const plan = popup.querySelector('select[name="plan"]').value;
      return { plan };
    }
  })
  .step({
    title: 'Summary',
    icon: 'success',
    isSummary: true,
    html: '<div class="hint">Click OK to finish.</div>'
  })
  .run()
  .then((res) => {
    if (res.isConfirmed) {
      $.layer({
        title: 'Done',
        icon: 'success',
        popupAnimation: false,
        replace: true,
        html: '<pre>' + JSON.stringify(res.value, null, 2) + '</pre>'
      });
    }
  });
});

<button class="btn primary" onclick="openDom()">Open DOM popup</button>
<button class="btn success" onclick="openWizard()">Open step wizard</button>

<!-- Hidden DOM blocks (default display:none) -->
<div id="demo_dom_block" class="hidden-dom">
  <div class="form">
    <div class="field">
      <label>Quick note</label>
      <input placeholder="This input lives in a hidden DOM block" value="Hello from DOM!">
    </div>
    <div class="hint" style="margin-top: -4px;">
      This DOM node is moved into the popup and restored on close.
    </div>
  </div>
</div>

<div id="wizard_step_1" class="hidden-dom">
  <div class="form">
    <div class="field">
      <label>Name</label>
      <input name="name" placeholder="Your name">
    </div>
    <div class="error" data-error></div>
  </div>
</div>

<div id="wizard_step_2" class="hidden-dom">
  <div class="form">
    <div class="field">
      <label>Plan</label>
      <select name="plan">
        <option value="free">Free</option>
        <option value="pro">Pro</option>
        <option value="team">Team</option>
      </select>
    </div>
    <div class="hint">Confirm will finish the wizard.</div>
  </div>
</div>

/* This page hides DOM blocks by default:
.hidden-dom { display: none; }

Layer will move the element into the popup while open,
then restore it back (and restore display/hidden state) on close. */