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>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<div class="modal-popup mp-284a8df4 fw-mp fw-mp--trig-button">
<button type="button" class="fw-mp__trigger" aria-haspopup="dialog" aria-controls="fw-mp-10">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-10" 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>
</div>
</div>
</div>
</section>To learn more about the Modal / Popup shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.