Modals[ Variable Reference ]

Since v4.1.0, Jellyfish has included support for native <dialog> elements for the display of modals. This removes dependencies on external Javascript libraries and ensures that modal elements are accessible as standard.

To avoid being opinionated on the <dialog> element, the .modal class is required on the element. The modal is targetted with a button or anchor calling toggleModal('id') where the argument is the ID of the dialog element. Close buttons are automatically appended to modals via Javascript, on initialization.

To preserve padding and layout, a .modal should contain a .modal-content element, used to contain the modal's content. The .modal element is a flex element; consequently adding .modal-header or .modal-footer will ensure they are always visible. This allows for key information or call-to-actions to always be in sight.

A basic modal

Open modal

This is a modal

Sed a sollicitudin dolor. Nulla vel lacus a mauris rutrum pellentesque eget cursus arcu. Sed finibus gravida dui, in tempor velit suscipit eu. Fusce molestie purus pretium tellus suscipit, non rutrum libero mattis. Morbi consequat est ac diam efficitur, quis consectetur sapien finibus. In varius lacus turpis, et tincidunt metus malesuada et. Curabitur venenatis commodo ante ac sollicitudin. Aliquam quis condimentum ipsum, eget dignissim dolor. Praesent feugiat laoreet odio, eget suscipit metus pretium eget. Nunc tincidunt nulla sapien, a eleifend eros posuere commodo. Duis volutpat elit sed risus semper gravida. Morbi ultricies pharetra ante ac condimentum. Donec euismod erat felis, non viverra nunc tincidunt eu. Nam hendrerit rhoncus libero sit amet fermentum. Curabitur quis gravida orci.

Modal groups

You can combine modals into a group, which will automatically append navigation arrows to the modals within the group. The user can also navigate via keyboard (left and right arrows). Just add a data-modalgroup attribute to the modals within the group.

Modal Group One

Modal Group Two

This content is in the first modal of the group

This content is in the second modal of the group

This content is in the third modal of the group

This content is in the first modal of the second group

This content is in the second modal of the second group

Javascript API

When a modal is opened, a jfModalOpened event is fired. This event can be hooked into, for example to autoplay a video that is embedded in the modal. The event.detail property contains the ID of the modal element.

    
      document.addEventListener("jfModalOpened", function (event) {
        console.log(event.detail);
        // Object { newModalId: "modal-group-1" }
      });
    
  

Likewise, when a modal is closed, a jfModalClosed event is fired. This event is triggered when the user presses Escape, clicks on the close button, clicks outside of the dialog (on the overlay) or uses the navigation keys to move through a modalGroup.

    
      document.addEventListener("jfModalClosed", function (event) {
        console.log(event.detail);
        // Object { closedModalId: "modal-group-1" }
      });