Overlay Modal

Example for lta-overlay-modal with data-modal-dismiss anddata-modal-submit. Edit markup and click Apply — open/submit wiring is restored automatically.

Default

Live preview

Markup (editable)

Locked section

Example matching the "section locked" pattern used across venue registration.

Live preview

Markup (editable)

<button type="button" class="lta-btn lta-btn--md lta-btn--primary" id="js-open-overlay-modal-locked-demo">
  Open modal
</button>
<p class="u-body2 u-mt-2" id="js-overlay-modal-locked-demo-event-log">Event: none</p>

<lta-overlay-modal id="overlay-modal-locked-demo" is-open="false">
  <div class="u-text-right u-mb-3">
    <button type="button" class="lta-btn lta-btn--sm lta-btn--link lta-btn--icon lta-btn--icon-after u-text-lta-blue text-decoration-none" data-modal-dismiss>
      Close
      <svg class="lta-icon" width="1em" height="1em" fill="currentColor" alt="close" aria-hidden="true">
        <use xlink:href="/static/images/icons/lta-icons.svg#close"></use>
      </svg>
    </button>
  </div>
  <h2 class="u-title2 u-text-center u-text-lta-dark-blue u-mb-2">This section is currently locked</h2>
  <p class="u-body1 u-text-center u-text-lta-dark-blue u-mb-4">
    You will only be able to access the insurance and policies section once you've completed the benefits package section.
  </p>
  <button type="button" class="lta-btn lta-btn--md lta-btn--primary lta-btn--block" data-modal-dismiss>
    Return to sections
  </button>
</lta-overlay-modal>