Modality (Comprehensive Modal Window Component)

Modality makes it easy to use modal-windows in your HTML5 project. It's framework independent; versatile; and hopefully you'll find it easy to work with. Features include:

Self-closing (timed) modals, e.g. for notification use - countdown timer included.
Built-in, fully functional replacement for native HTML prompt() and confirm().
Updatable modals so that you can update the content of the individual modal windows.
Auto-placement, also when resizing the viewport or scrolling (although page-scrolling is disabled for desktops when the modal overlay is visible).

The modal is built using a BEM CSS model, resulting in the following fundamental component HTML:

The .modality wrapper can contain multiple .Modality-window elements and will only display the top element in the stack, i.e. the last .Modality-window inside the .Modality-container element.

Appearance

The appearance of the modal is (of course) styled completely using CSS, so you can easily change it to fit your specific project, but the positioning of the individual Modality-windows is done using JavaScript.

`.Modality` wrapper element excluded

In the below example, the .modal wrapper element has been disabled to prevent the remainder of the Modality-test-examples on this page from adding themselves to the wrapper-element.

Position-property changed in test-example

In order to get the below test-example to display the modal correctly, style="position: relative;" has been added to the .Modality-container element which is otherwise absolutely positioned.

Display-property changed in test-example

In order to get the below test-example to display the modal correctly, style="display: block;" has been added to the .Modality-container element which is otherwise absolutely positioned.

Modal Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae ipsum sit amet nulla bibendum rhoncus. Nulla augue nisl, fermentum quis hendrerit sed, fermentum at mauris. Cras sodales risus vel nisi pellentesque rhoncus. Praesent vulputate dolor nisi, id pharetra nisi varius eu. Fusce non auctor dui. Quisque a ullamcorper nisi. Integer laoreet velit et suscipit luctus.

Normal

Plain

With modifier-classname for Modality-window

Modifier class `Modality-window--alert` added to remainder of test cases

In order to display modals realistically, i.e. displaying a modal that doesn't fill the entire width of the screen, the remainder of the test-examples all contain a Modality-window modifier-class.

Vertically centered

Buttonless modal

Self-closing

Self-closing, buttonless modal

Modals with callbacks

Native HTML confirm() replacements

Native HTML prompt() replacements

Modal with onReady callback

JavaScript onReady-functions as part of 'test-example'

The JavaScript function(s) that are initiated by the onReady-callback function are inlined as part of the 'test-example' element.

Scroll on `autofocus="autofocus"`

If the HTML content your filling into the modal contains a form element with autofocus="autofocus" it will most likely make the page scroll when loading the modal.

Instead use the formFieldFocus: true property (enabled by default), which will set focus to the first non-hidden form-field in the modal window.

Updated modal

So why be able to update modals in the first place? Well, sometimes you might want to show the modal with an AJAX-loader while for instance AJAX-requesting the content.

TODO: Updates on confirm

The below example launches a (confirm) modal, which is subsequently updated upon confirm.