Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Overlay

.overlay

Overlay component. Contains close button.

Markup

<button class="button"
    data-controller="generic/ui/ContentOpener"
    data-config="{&quot;type&quot;: &quot;Overlay&quot;, &quot;contentId&quot;: &quot;overlay-content&quot;}"
    title="Overlay example">
Click for overlay
</button>
<article class="richText richText--overlay is-hidden" data-controller="generic/ui/RichText" id="overlay-content">
    <p>Overlay content</p>
</article>
<!-- Actual Overlay HTML  -->
<!--
<div class="overlay is-in-dom is-visible" aria-live="polite" role="dialog">
    <div class="overlay__scrollContainer" tabindex="">
        <div class="overlay__contentPositioner">
            <div class="overlay__content">
                <div class="container">
                    <div class="grid">
                       <div class="grid__unit s-4-4 m-10-12 m-push-left-1-12 xl-8-12 xl-push-left-1-12">
                            <div class="overlay__body" data-contentcontainer="">
                                <article class="richText richText--overlay" data-controller="generic/ui/RichText" id="overlay-content">
                                 Overlay content
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a href="javascript:void(0)" class="closeButton overlay__close">
                <span class="icon">
                    <span class="alt">Sluiten</span>
                </span>
            </a>
        </div>
    </div>
    <div class="darkener"></div>
</div>
-->