Modal

Create modal dialogs with different styles and transitions.


Usage

The modal component consists of a block of content and overlay that appears in front of all other page content.

You can use any element to toggle a modal dialog. An <a> element needs to be linked to the modal's id. To enable the necessary JavaScript, add the data-modal attribute.

Usage


Sub Objects

Modal Header & Footer

You can create a header and footer for your modal, which are seperated from the content. Just add the .modal-header or the .modal-footer class to a <div> element inside the modal dialog.

Usage


Modal Caption

You can also create a caption that will be placed outside the modal. Just add the .modal-caption class to a <div> element inside the modal dialog.

Usage


Modifiers

Modal Dialog Lightbox

To create a lightbox-like modal dialog, just add the .modal-dialog-lightbox class. This can be useful, if you want to use the modal as a lightbox for your images. The close button will adjust its position automatically to the dialog.

NOTE When creating a close button within the lightbox modifier, we also recommend adding the .close-alt class from the Close component to the close button to give your button a styling that fits the lightbox modal.

Usage


Modal Dialog Large

To apply the site's container width to the modal dialog, just add the .modal-dialog-large class.

Usage


JavaScript

You can handle modal dialogs via raw javascript.

var modal = Clique.modal(".modal-selector");

if ( modal.isActive() ) {
    modal.hide();
} else {
    modal.show();
}

Options

Option Possible value Default Description
keyboard boolean true If true, the modal can be closed using the esc key
bgclose boolean true If true, the user may close the modal by click on the overlay
minScrollHeight int 150 The minimum height of the modal's .overflow-container to enable scrolling
center bool false Whether or not to vertically center the modal

Events

Name Parameter Description
show.clique.modal event Triggered when the modal is shown
hide.clique.modal event Triggered when the modal is hidden