Jump To:

  1. Demos
    1. Basic Centered Modal
    2. Right Sidebar Modal
    3. Fullscreen Modal
  2. Variables
    1. $config
  3. Mixins
    1. set()
    2. styles()
  4. Functions
    1. get()

Demos

Basic Centered Modal

The default centered modal configuration, triggered by a button.

HTML 
<button class="button" data-ulu-dialog-trigger="modal-example-center">Open Modal</button>

<div id="modal-example-center"
data-ulu-modal-builder='{ "title": "Information" }'
hidden>
<p>This is a standard centered modal window. It can contain any HTML content, including text, images, or forms.</p>
<div class="button-group">
<button class="button" data-ulu-dialog-close>Confirm</button>
<button class="button button--outline" data-ulu-dialog-close>Cancel</button>
</div>
</div>

Using the position: 'right' option to create a sidebar-style modal.

HTML 
<button class="button" data-ulu-dialog-trigger="modal-example-sidebar">Open Sidebar</button>

<div id="modal-example-sidebar"
data-ulu-modal-builder='{ "title": "Settings", "position": "right" }'
hidden>
<div class="menu-stack">
<ul class="menu-stack__list">
<li class="menu-stack__item"><a href="#" class="menu-stack__link">Notification Settings</a></li>
<li class="menu-stack__item"><a href="#" class="menu-stack__link">Security Options</a></li>
<li class="menu-stack__item"><a href="#" class="menu-stack__link">Account Data</a></li>
</ul>
</div>
</div>

Fullscreen Modal

A modal that fills the entire viewport, useful for immersive content or complex tasks.

HTML 
<button class="button" data-ulu-dialog-trigger="modal-example-fullscreen">View Fullscreen</button>

<div id="modal-example-fullscreen"
data-ulu-modal-builder='{ "title": "Editor Mode", "size": "fullscreen" }'
hidden>
<div class="container">
<h2 class="h2">Comprehensive Overview</h2>
<p>This view allows for focused interaction with complex data or large media assets without the distraction of the underlying page.</p>
<button class="button" data-ulu-dialog-close>Exit Fullscreen</button>
</div>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "backdrop-color" :                true,
  "backdrop-blur" :                 4px,
  "background-color" :             white,
  "body-padding" :                  1rem,
  "border-radius" :                 true,
  "box-shadow" :                    true,         
  "height":                         340px,
  "height-no-header":               100px,
  "width":                          60rem,
  "min-width":                      300px,
  "width-left-right" :              30rem,
  "animation-duration" :            300ms,
  "animation-duration-exit" :       150ms,
  "animation-timing-function" :     cubic-bezier(0, 0, .2, 1),
  "close-background-color":         null,
  "close-background-color-hover":   null,
  "close-border-color":             null,
  "close-border-color-hover":       null,
  "close-box-shadow":               none,
  "close-color":                    null,
  "close-color-hover":              null,
  "close-margin":                   0.5rem,
  "close-icon-vertical-offset" : true,
  "header-background-color":        black,
  "header-border-bottom":           none,
  "header-color":                   white,
  "header-padding":                 1rem,
  "footer-padding" :                (0.5rem 1rem),
  "footer-background-color" :       #f6f6f6,
  "footer-border-top" :             none,
  "footer-text-align" :             right,
  "resizer-background-color":       rgb(221, 221, 221),
  "resizer-background-color-hover": rgb(192, 192, 192),
  "resizer-color":                  rgb(99, 99, 99),
  "resizer-color-hover":            black,
  "resizer-width":                  1.25rem,
  "resizer-center-size" :           1.65rem,
  "title-color":                    white,
  "title-font-weight":              bold,
  "title-font-family" :             null,
  "title-icon-margin" :             0.5em,
  "title-size" :                    "large",
  "title-line-height" :             true,
  "title-text-transform" :          null,
  "breakpoint" :                    true,
  "frame-aspect-ratio" :            list.slash(16, 9),
  "frame-fill-min-height" :         65vh,
  "sizes" : (
    "small" : 30rem,
    "large" : 80rem
  ),
);
File Information
  • File: _modal.scss
  • Group: modal
  • Type: variable
  • Lines (comments): 45-92
  • Lines (code): 94-146

Map Properties

Name Type Default Description
backdrop-blur CssValue 4px Determines the blur of the backdrop.
backdrop-color Color true The unblurred background color outside the modal. If set to true, will use the element.scss property for backdrop-color.
background-color Color white The background color of the modal.
body-padding Dimension 1rem The padding of the body content.
border-radius CssValue true The border radius of the modal. If set to true, will use the element.scss property for border-radius-large.
box-shadow CssValue true Determines the box-shadow of the modal. If set to true, will use the element.scss property for backdrop-color.
height Dimension 340px The min-height of the modal.
height-no-header Dimension 100px The min-height of the modal.
width Dimension 60rem The width of the Modal
min-width Dimension 300px The min-width of the Modal (for resizing, etc)
animation-duration Time 300ms Animation duration for the modal opening.
animation-duration-exit Time 150ms Animation duration for the modal closing.
animation-timing-function CssValue cubic-bezier(0, 0, .2, 1) The animation timing menu of the modal.
close-background-color Color null Background color for the modal close icon.
close-background-color-hover Close null Background color for the modal close icon when hovered or focused.
close-border-color Color null Border color of the modal__close element. Overrides button border color if using button styling. Fallback to close-background-color.
close-border-color-hover Color null Border color hover of the modal__close element. Overrides button border color if using button styling. Fallback to close-background-color-hover.
close-box-shadow Color none Box-shadow of the modal__close element. Overrides button border color if using button styling. Defaults to remove box-shadow styling.
close-color Color null Type color for the modal close icon.
close-color-hover Color null Type color for the modal close icon when hovered or focused.
close-margin Dimension 0.5rem The margin for the modal close icon.
header-background-color Color black Background color for the header.
header-border-bottom CssValue none Bottom-border on the modal header.
header-color Color white Type color of the header.
header-padding Dimension 1rem The padding of the modal header.
footer-padding Dimension (0.5rem 1rem) The padding of the modal footer.
footer-background-color Color (0.5rem 1rem) The background color of the footer
footer-border-top Color (0.5rem 1rem) The border between body and footer
footer-text-align CssValue right Text alignment for footer
resizer-background-color Color rgb(221, 221, 221) The background color of the resizer.
resizer-background-color-hover Color rgb(192, 192, 192) The background color of the resizer when hovered or focused.
resizer-color Color rgb(99, 99, 99) The type color of the resizer.
resizer-color-hover Color black The type color of the resizer when hovered or focused.
resizer-width Dimension 1rem The width of the resizer.
resizer-center-size Dimension 1.65rem The width/height of the resizer (in bottom right corner) used when position center with resize enabled
title-color Color white Type color of the title.
title-font-weight CssValue bold Font weight of the title.
title-font-family CssValue null Font family for title
title-icon-margin Dimension 0.5em The margin of the title icon
title-line-height Boolean CssValue true
title-size String large The font-size of the title. This uses typography.scss, so the value of this options should be a variable from typography.scss.
title-text-transform CssValue null Transform option for the title.
sizes Map Map Size options to enable unique stylings.
breakpoint String true Optional breakpoint for modals (used for adaptive things like fullscreen-mobile), if set to true will fallback to breakpoint default
frame-aspect-ratio String list.slash(16, 9) Default aspect ratio for single embedded items in frame-ratio layout
frame-fill-min-height String 65vh Default minimum height for single embedded items in frame-fill layout

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _modal.scss
  • Group: modal
  • Type: mixin
  • Lines (comments): 148-151
  • Lines (code): 153-155

Examples

@include ulu.component-modal-set(( "property" : value ));

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Prints modal component styles

File Information
  • File: _modal.scss
  • Group: modal
  • Type: mixin
  • Lines (comments): 167-169
  • Lines (code): 171-600

Examples

@include ulu.component-modal-styles();

Require

Functions

get()

Function

Get a config option

File Information
  • File: _modal.scss
  • Group: modal
  • Type: function
  • Lines (comments): 157-160
  • Lines (code): 162-165

Examples

@include ulu.component-modal-get("property");

Parameters

Name Type Description
$name Map Name of property

Require