<div class="container py-5 text-center">
  <p class="text-muted small">Move your cursor to the very top of this preview (as if leaving the page) to trigger the modal — or click the button below.</p>
  <button class="btn btn-outline-dark btn-sm" data-bs-toggle="modal" data-bs-target="#bsnewsModal">Open manually</button>
</div>

<div class="modal fade" id="bsnewsModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bsnews-modal">
      <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-body p-4 text-center">
        <div class="bsnews-icon mx-auto mb-3">✉</div>
        <h5 class="fw-bold">Before you go — 10% off</h5>
        <p class="text-muted small mb-3">Join the newsletter and get a one-time discount code.</p>
        <form id="bsnewsForm" class="d-flex gap-2" novalidate>
          <input type="email" class="form-control" id="bsnewsEmail" placeholder="you@email.com" required>
          <button type="submit" class="btn btn-dark">Get code</button>
        </form>
        <p class="small mt-2 mb-0" id="bsnewsStatus">&nbsp;</p>
      </div>
    </div>
  </div>
</div>

.bsnews-icon { width: 52px; height: 52px; border-radius: 50%; background: #eef0ff; color: #6366f1; display: flex; align-items: center; justify-content: center; font-size: 22px; }

const modalEl = document.getElementById('bsnewsModal');
const modal = new bootstrap.Modal(modalEl);
const form = document.getElementById('bsnewsForm');
const email = document.getElementById('bsnewsEmail');
const status = document.getElementById('bsnewsStatus');

let shown = false;

// The classic exit-intent trigger: the pointer crosses the very top edge of
// the viewport, the way it does on the way to closing the tab or clicking
// the browser's back button. Fires at most once per visit.
document.addEventListener('mouseout', e => {
  if (shown) return;
  if (e.clientY <= 0) {
    shown = true;
    modal.show();
  }
});

form.addEventListener('submit', e => {
  e.preventDefault();
  if (!email.checkValidity()) {
    email.classList.add('is-invalid');
    return;
  }
  email.classList.remove('is-invalid');
  status.textContent = 'Code sent to ' + email.value + ' — check your inbox.';
  status.className = 'small mt-2 mb-0 text-success';
});

modalEl.addEventListener('hidden.bs.modal', () => {
  form.reset();
  email.classList.remove('is-invalid');
  status.textContent = '\u00A0';
  status.className = 'small mt-2 mb-0';
});