DOM content + Step flow

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

// 2) Step flow (wizard)
xjs.Layer.$({
  icon: 'info',
  closeOnClickOutside: false,
  closeOnEsc: 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 };
  }
})
.fire()
.then((res) => {
  if (res.isConfirmed) {
    xjs.layer({
      title: 'Done',
      icon: 'success',
      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>
<div id="wizard_step_1" class="hidden-dom">...</div>
<div id="wizard_step_2" class="hidden-dom">...</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. */