Newsletter Popup Dialog

Bootstrap 6 Dialog newsletter popup with a photo side, email signup with validation, a don't-show-again option, delayed auto-open and a confirmation state.

Also known as: newsletter popup, email signup modal, subscribe popup, exit intent style signup

Bootstrap 6 Modals Responsive #dialog #form #modal #newsletter #popup

Newsletter Popup Dialog live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A warm, editorial newsletter popup built on the Bootstrap 6 Dialog component. A photo fills one side, and the other side has a headline, an email field with a Subscribe button and a "Don't show this again" checkbox. The popup opens after a short delay, remembers visitors who opt out or subscribe, and ends with a confirmation screen. It fits blogs, magazines and content sites.

How it works

The root .nlp-root shows a sample article with a "Get the newsletter" button (data-bs-toggle="dialog") and a <dialog class="dialog dialog-slide-up nlp-dialog">. Inside, .nlp-layout is one column on phones (a short photo banner on top) and becomes a two-column grid from 768px, with .nlp-media on the left.

script.js reads data-nlp-delay from the root and opens the dialog after that many milliseconds, unless storage says the visitor has opted out. Submitting .nlp-form checks the email field and marks errors with .is-invalid. Because the feedback is a sibling of the .input-group inside .form-field, Bootstrap shows the message. A valid email shows a spinner, then .nlp-pane--done with the address, and stores the opt-out flag. If the checkbox is ticked when hidden.bs.dialog fires, the flag is stored too. Storage is wrapped in try/catch, so the popup still works in sandboxed iframes and private modes.

The photo comes from Unsplash; replace it with your own image.

Customization

--nlp-accent on .nlp-root: the terracotta brand color. It feeds --bs-primary-bg (Subscribe button) and --bs-control-checked-bg (checkbox).
data-nlp-delay on .nlp-root: the delay in milliseconds (the demo uses 600; 5000 to 15000 is common). Remove the attribute to open the popup only from the button.
STORAGE_KEY in script.js: rename it if you run several popups on one domain.
grid-template-columns on .nlp-layout (desktop media query): change the photo-to-text ratio, or hide .nlp-media for a text-only popup.
--bs-dialog-width on .nlp-dialog: the popup width (48rem).
Replace the setTimeout in the submit handler with fetch('/api/newsletter', …) for your email provider.

Use cases

Blogs and magazines: the popup opens after a short delay with a photo and a headline
Content sites: visitors can tick Don't show this again and will not see the popup next time
Newsletter growth: the email field is validated before showing a confirmation screen
Editorial sites: a photo banner stacks above the text on phones

Accessibility

The dialog is labelled by its headline and described by the intro text. The email field has a visually hidden label, aria-invalid and a visible error message. The opt-out checkbox has a real <label for>. When the confirmation appears, its heading receives focus. Escape and the close button dismiss the popup, and Bootstrap traps focus while it is open. The slide-up transition is skipped under prefers-reduced-motion.

Bootstrap 6 notes

This is built on Bootstrap 6.0.0-alpha.1, and alpha APIs can still change. The BS5 modal becomes <dialog class="dialog">, and dialog-slide-up is a new entrance variant. form-check is replaced by a bare .check, and the button inside the input group uses btn-solid theme-primary input-group-btn. Dialog.getOrCreateInstance() is imported from the bundle module.

Newsletter Popup Dialog at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons
Layout: Responsive, works on mobile
Category: Modals
License: Free for personal and commercial use

Questions about this template

Can I use the Newsletter Popup Dialog code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.