Modal

Popup for important content and notifications.

Modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
[Bottom slot]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
[Bottom slot]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
[Bottom slot]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
[Bottom slot]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
[Bottom slot]
<button id="62bec60ccb215" class="c-button c-button__filled c-button__filled--secondary c-button--md" href="" target="_top" data-open="modal-standard" type="filled" aria-pressed="false" data-uid="62bec60ccb20c">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccb2f7" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec60ccb2f1">
                    favorite
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Open standard modal
            </span>
        
    </span>
</button>
    <!-- modal.blade.php -->
<dialog id="modal-standard" class="c-modal c-modal--is-modal c-modal--padding-3 c-modal--overlay-light" role="dialog" aria-modal="true"
    aria-labelledby="modal__label__modal-standard" data-uid="62bec60ccb3d7">

    <header class="c-modal__header">
                    <!-- typography.blade.php  -->
<h2 id="modal__label__modal-standard" class="c-typography c-typography__variant--h2" data-uid="62bec60ccb602">
    Example modal standard
</h2>        
        <button id="62bec60ccb666" class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="62bec60ccb662">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccb6a2" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bec60ccb69f">
                    close
            </i>
            </span>
        
        
    </span>
</button>    </header>

    <section class="c-modal__content">

        
                    <button id="62bec60ccb6e0" class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-prev="" type="button" aria-pressed="false" data-uid="62bec60ccb6dd">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccb715" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bec60ccb712">
                    chevron_left
            </i>
            </span>
        
        
    </span>
</button>        

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

        
                    <button id="62bec60ccb74f" class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-next="" type="button" aria-pressed="false" data-uid="62bec60ccb74c">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccb780" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bec60ccb77d">
                    chevron_right
            </i>
            </span>
        
        
    </span>
</button>            </section>

            <footer class="c-modal__footer">
            [Bottom slot]
        </footer>
    
            <!-- card.blade.php -->
<div id="62bec60ccba00" class="c-steppers c-steppers--type-dots" data-uid="62bec60ccb9fc">
    
</div>    </dialog>


    <button id="62bec60ccbbef" class="c-button c-button__filled c-button__filled--secondary c-button--md" href="" target="_top" data-open="modal-small" type="filled" aria-pressed="false" data-uid="62bec60ccbbea">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccbc2c" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec60ccbc28">
                    favorite
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Open small modal
            </span>
        
    </span>
</button>
    <!-- modal.blade.php -->
<dialog id="modal-small" class="c-modal c-modal--is-modal c-modal--size-sm c-modal--padding-2 c-modal--border-radius-lg c-modal--overlay-light" role="dialog" aria-modal="true"
    aria-labelledby="modal__label__modal-small" data-uid="62bec60ccbc80">

    <header class="c-modal__header">
                    <!-- typography.blade.php  -->
<h2 id="modal__label__modal-small" class="c-typography c-typography__variant--h2" data-uid="62bec60ccbcba">
    Example modal small
</h2>        
        <button id="62bec60ccbcf7" class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="62bec60ccbcf3">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccbd2c" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bec60ccbd29">
                    close
            </i>
            </span>
        
        
    </span>
</button>    </header>

    <section class="c-modal__content">

        
        

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

        
            </section>

            <footer class="c-modal__footer">
            [Bottom slot]
        </footer>
    
    </dialog>


    <button id="62bec60ccbd93" class="c-button c-button__filled c-button__filled--secondary c-button--md" href="" target="_top" data-open="modal-medium" type="filled" aria-pressed="false" data-uid="62bec60ccbd8e">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccbddb" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec60ccbdd8">
                    favorite
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Open medium modal
            </span>
        
    </span>
</button>
    <!-- modal.blade.php -->
<dialog id="modal-medium" class="c-modal c-modal--is-modal c-modal--size-md c-modal--padding-3 c-modal--border-radius-md c-modal--overlay-light" role="dialog" aria-modal="true"
    aria-labelledby="modal__label__modal-medium" data-uid="62bec60ccbe1b">

    <header class="c-modal__header">
                    <!-- typography.blade.php  -->
<h2 id="modal__label__modal-medium" class="c-typography c-typography__variant--h2" data-uid="62bec60ccbea5">
    Example modal medium
</h2>        
        <button id="62bec60ccbeed" class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="62bec60ccbee9">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccbf23" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bec60ccbf20">
                    close
            </i>
            </span>
        
        
    </span>
</button>    </header>

    <section class="c-modal__content">

        
        

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

        
            </section>

            <footer class="c-modal__footer">
            [Bottom slot]
        </footer>
    
    </dialog>


    <button id="62bec60ccbf67" class="c-button c-button__filled c-button__filled--secondary c-button--md" href="" target="_top" data-open="modal-large" type="filled" aria-pressed="false" data-uid="62bec60ccbf64">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccbf9c" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec60ccbf99">
                    favorite
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Open large modal
            </span>
        
    </span>
</button>
    <!-- modal.blade.php -->
<dialog id="modal-large" class="c-modal c-modal--is-modal c-modal--size-lg c-modal--padding-4 c-modal--border-radius-sm c-modal--overlay-light" role="dialog" aria-modal="true"
    aria-labelledby="modal__label__modal-large" data-uid="62bec60ccbfd6">

    <header class="c-modal__header">
                    <!-- typography.blade.php  -->
<h2 id="modal__label__modal-large" class="c-typography c-typography__variant--h2" data-uid="62bec60ccc00a">
    Example modal large
</h2>        
        <button id="62bec60ccc043" class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="62bec60ccc040">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccc076" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bec60ccc073">
                    close
            </i>
            </span>
        
        
    </span>
</button>    </header>

    <section class="c-modal__content">

        
        

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

        
            </section>

            <footer class="c-modal__footer">
            [Bottom slot]
        </footer>
    
    </dialog>


    <button id="62bec60ccc0b6" class="c-button c-button__filled c-button__filled--secondary c-button--md" href="" target="_top" data-open="modal-panel" type="filled" aria-pressed="false" data-uid="62bec60ccc0b3">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccc0e8" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec60ccc0e6">
                    favorite
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Open panel modal
            </span>
        
    </span>
</button>
    <!-- modal.blade.php -->
<dialog id="modal-panel" class="c-modal c-modal--is-panel c-modal--overlay-light" role="dialog" aria-modal="true"
    aria-labelledby="modal__label__modal-panel" data-uid="62bec60ccc120">

    <header class="c-modal__header">
                    <!-- typography.blade.php  -->
<h2 id="modal__label__modal-panel" class="c-typography c-typography__variant--h2" data-uid="62bec60ccc151">
    Example modal panel
</h2>        
        <button id="62bec60ccc189" class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg c-button--icon-only" href="" target="_top" data-close="" type="button" aria-pressed="false" data-uid="62bec60ccc186">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec60ccc1bc" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="62bec60ccc1b9">
                    close
            </i>
            </span>
        
        
    </span>
</button>    </header>

    <section class="c-modal__content">

        
        

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

        
            </section>

            <footer class="c-modal__footer">
            [Bottom slot]
        </footer>
    
    </dialog>
@php
    $modals = [
        'standard' => [
            'isPanel' => false,
            'overlay' => 'light',
            'navigation' => true
        ],
        'small' => [
            'size' => 'sm',
            'padding' => 2,
            'borderRadius' => 'lg'
        ],
        'medium' => [
            'size' => 'md',
            'padding' => 3,
            'borderRadius' => 'md'
        ],
        'large' => [
            'size' => 'lg',
            'padding' => 4,
            'borderRadius' => 'sm'
        ],
        'panel' => [
            'isPanel' => true,
            'animation' => 'slide-up',
            'padding' => 0
        ],
    ];
@endphp

@foreach($modals as $key => $modal)

    @button(
            [
                'href' => '',
                'type' => 'filled',
                'text' => 'Open ' . $key . ' modal',
                'icon' => 'favorite',
                'size' => 'md',
                'color' => 'secondary',
                'reverseIcon' => true,
                'attributeList' => ['data-open' => 'modal-' . $key]
            ]
        )
    @endbutton

    @modal(array_merge([
            'heading'=> "Example modal " . $key,
            'id'=> 'modal-' . $key
        ], (array) $modal))
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

        @slot('top')
            [Top slot]
        @endslot

        @slot('bottom')
            [Bottom slot]
        @endslot
    @endmodal

@endforeach

Blade component parameters

Key Default value Type Available values Description
heading string - The title of the modal
slot string - The main content of the modal
bottom string - Extra slot at the bottom of the modal (below content)
overlay light string - -
isPanel false boolean - Removes padding, to enable a panel like behaviour. Cover whole page viewport.
id string - A unique id which will be used to target the modal to open with the correct data-attr
animation string - Which animation to use when opening and closing the modal.
navigation false boolean - Adds navigation arrows, to slide between stuff.
size string - Empty as default is set to max width 800px. But you can use sm, md and lg
padding 3 integer - Adds whitespace around the content. Value: 1 - 4
borderRadius false boolean - Rounded edges. Value: sm, md, lg
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Modal/modal.json