Modal

Standalone component. Needs to have a trigger on the same page.
Is composed of a block of text, and a close button. Will allways be rendered on top of the rest of the page.

The trigger can be anything, but preferably a link. A trigger becomes a trigger if it has a class="js--dialog-open".
Will lock the rest of the page from being scrolled, when the modal is open.

Se example page for working example

Modal

Component status: WIP

Se example page for working example

<dialog class="modal js--dialog" >
    <div class="modal__close">
        <button aria-label="Close" class="js--dialog-close">
            &times;
        </button>
    </div>
    <div class="modal__container">
        <div class="modal__heading">
            <h1>Parkeringspriser</h1>
        </div>
        <div class="modal__trumpet">
            <h2>Magasin Kgs. Nytorv</h2>
        </div>
        <div class="modal__content">
            <p>Mandag til søndag kl. 08.00 til 20.00 <br> 42,00 DKK pr. påbegyndt time. <br> <br> Mandag til søndag kl. 20.00 til 08.00 <br> 15,00 DKK pr. påbegyndt time</p>
        </div>
        <div class="modal__byline">
            <h3>*Magasin tager forbehold for prisændringer, som ikke er blevet oplyst Magasin af tredjepart.</h3>
        </div>
    </div>
</dialog>

Se mere

Developer notes

Modal

Trigger class (optional), an uniqe id.

Only necessary if more than one modal is present on the page. If included, the trigger needs to have a data-modal-attribute with the same value. Else the modal should have an id="modal"

example with single modal:


    <a href="javascript:;" class="js--open-modal">open modal</a>
    <dialog id="modal"></dialog>

example with multiple modal’s


    <a href="javascript:;" class="js--open-modal" data-modal="first-modal">open modal</a>
    <dialog id="first-modal"></dialog>

    <a href="javascript:;" class="js--open-modal" data-modal="second-modal">open modal</a>
    <dialog id="second-modal"></dialog>

Se mere

Developer notes

Modal

Trigger class (optional), an uniqe id.

[title]