Interactive

Modal / Popup

Open any content in a modal dialog.

Live demo

See it in action

A trigger — button, text, icon or image — that opens any content in a modal. Click a button below; each opens a different modal style.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="modal-popup mp-783569f2 fw-mp fw-mp--trig-button">
		<button type="button" class="fw-mp__trigger" aria-haspopup="dialog" aria-controls="fw-mp-60">Open modal</button>
		<div class="fw-mp__overlay fw-mp--design-center design-center fw-mp--size-md fw-mp--anim-zoom" id="fw-mp-60" role="dialog" aria-modal="true" aria-hidden="true" data-mp-close-overlay="1" aria-label="Welcome 👋">
			<div class="fw-mp__dialog" role="document">
				<button type="button" class="fw-mp__close" aria-label="Close"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
				<h3 class="fw-mp__title">Welcome 👋</h3>
				<div class="fw-mp__body">
					<p>Any HTML content goes here.</p>
				</div>
			</div>
		</div>
	</div>
</section>

To learn more about the Modal / Popup shortcode, please check out the online manual here.