Modal

A window that appears on top of the main content, often used to focus user attention on specific information, gather input, or display supplemental content. It usually has a clear close option.

Demo

Scripts

Add these before the </body> tag in your site/page settings

GSAP

 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

Modal component

<script src="https://cdn.jsdelivr.net/npm/socks-ui@{v}/dist/modal.js"></script>

Features

Full keyboard navigation
Keyboard trap when a modal is open
All attributes for screen readers added
Closes by clicking a close button or the background overlay

Anatomy

Trigger Button(/s)

Wrapper
- Root
  - Title (optional)
  - Close Button (optional)
- Overlay

Usage

Main Attributes:

s-modal-trigger={modal-wrapper-id} - A button that opens the modal. The value of this attribute should be the ID of the modal wrapper. You can have more than one trigger

s-modal = wrapper - The parent div that wraps the actual modal and an overlay div

s-modal = root - The modal element that contains info

s-modal = overlay - (optional) An overlay that makes background elements less visible. It closes the modal when clicked

s-modal = title - An element that acts as the title. If you don't want to include this element, you have to set an aria-label attribute (aria-label="Your title") on the root modal element

s-modal = close - A button that closes the modal. You can have more than one close button

‍

Advanced Attributes (optional):

s-modal-manual - Set this if you don't want to have trigger buttons and want to avoid the console error. Your modal should be opened programmatically using the openModal method (see below)

Advanced

Events

modal-open

modal-close

In both events, the accordion being toggled can be accessed through event.detail.

Example usage:

window.addEventListener('modal-open', (event)=> {
    console.log(event.detail)
})

No custom events are exported for this component.

Methods

socks.modals["id"].open() - Open modal with given ID

socks.modals["id"].open() - Close modal with given ID

‍

How to use them:

// this opens the modal that has the ID "some-id"
socks.modals["some-id"].open()

// you could also save them in your own variable to shorten it:
const modals = socks.modals;
modals["some-id"].open()

// if your ID doesn't have dashes, you could also do this:
socks.modals.some_id.open()

No custom methods are exported for this component.

Use Cases

Reset form when modal closes

// listens for closing modals
window.addEventListener('modal-close', (event)=> {
  // shows form
  event.detail.querySelector('form').style.display = 'block';
  // hides success message
  event.detail.querySelector('.w-form-done').style.display = 'none';
})

‍

Close modal after form submission

const delay = 4 // how many seconds to wait
const form = document.querySelector('.your-form') // form selector
const modalID = form.closest('[s-modal="wrapper"]').id // gets modal ID for you
// listen for submissions on that form
form.addEventListener('submit', ()=>{
  setTimeout(()=> {
    socks.modals[modalID].close() // closes the parent modal
  }, delay * 1000)
})

No special use cases added yet

Installation

Accordion