Shortcodes

Basic Syntax

{reveal text="Click Here"}Your HTML content here…{/reveal}

Attribute Reference

• text — Trigger label (default: Open)
• class — Extra CSS classes on the trigger (e.g. btn btn-primary)
• title — Dialog heading (wired to aria-labelledby)
• id — Stable modal id for hash / JS API
• size — sm | md | lg | xl | full
• width — Exact max-width (e.g. 800px)
• height — Exact max-height (e.g. 500px)
• animation — scale | fade | slide | none
• speed — Animation duration in ms
• closebg — true | false — close on backdrop click
• closeesc — true | false — close on Escape

Examples

Button trigger + title

{reveal text="Open dialog" class="btn btn-primary" title="Welcome"}Hello from Reveal Modal.{/reveal}

Size presets

{reveal text="Small" size="sm" title="Notice"}Compact message.{/reveal}
{reveal text="Large" size="lg" title="Details"}Longer content.{/reveal}
{reveal text="Full width" size="full" title="Wide"}Nearly full viewport.{/reveal}

Custom width / height

{reveal text="Custom size" width="800px" height="500px" title="Custom"}Fixed max size.{/reveal}

Animations

{reveal text="Scale" animation="scale" speed="400"}Scale + fade.{/reveal}
{reveal text="Fade" animation="fade" speed="400"}Opacity only.{/reveal}
{reveal text="Slide" animation="slide" speed="400"}Rises from below.{/reveal}

Image + text

{reveal text="About this story" class="btn btn-primary" size="lg" title="About this story"}
<img src="images/sample.jpg" alt="" style="float:left;margin:0 1rem 0.75rem 0;max-width:140px" />
Your article copy goes here…
{/reveal}

Video / iframe

{reveal text="Watch video" class="btn btn-primary" size="lg" title="Product walkthrough"}
<div class="reveal-modal__media">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Demo video" allowfullscreen loading="lazy"></iframe>
</div>
{/reveal}

Media pauses automatically when the popup closes.

Hash / deep link

{reveal text="Hash-ready modal" id="welcome-modal" title="Welcome"}Opened via hash or API.{/reveal}
<a href="#welcome-modal">Open via #welcome-modal</a>

Confirmation (no backdrop close)

{reveal text="Delete item…" class="btn btn-danger" size="sm" title="Confirm delete" closebg="false"}
<p>Are you sure? This cannot be undone.</p>
<button type="button" class="btn btn-secondary close-reveal-modal">Cancel</button>
<button type="button" class="btn btn-danger close-reveal-modal">Yes, delete</button>
{/reveal}

JavaScript API

RevealModal.open('welcome-modal');
RevealModal.close();

Place shortcodes in articles or Custom HTML modules.