{/doc/acs-templating/ {ACS Templating}} {/doc/acs-templating/gadgets {Gadgets}} Modal Modal

Modal

Concept

A modal window is a graphical control element subordinate to an application's main window.

A modal window creates a mode that disables user interaction with the main window but keeps it visible, with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent window. This avoids interrupting the workflow on the main window..

OpenACS provides a modal implementation designed to not require external dependencies.

Usage

First of all, add the css and js files to the page.

    <link rel="stylesheet" href="/resources/acs-templating/modal.css">
    <script src="/resources/acs-templating/modal.js"></script>

If you plan to create modal dialogs dynamically on the page, also remember to invoke the modal function on the new element(s):

    <script>
       acsModal('#my-new-element-selector');
    </script>

acsModal accepts a multi-items query selector as argument. For elements present on the page at page load, invoking the function is not necessary.

Creating a modal

There are 4 relevant CSS classes for the modal: acs-modal, acs-modal-content, acs-modal-open and acs-modal-close.

acs-modal is the class wrapping the whole modal window. One acs-modal-content must be a child of the window element and is where your content goes.

acs-modal-open and acs-modal-close are two convenience classes: elements bearing this class will respectively open and close the modal. A close button must be placed inside the modal in order to work.

Targeting the right modal

In order to open a modal, this has to be "assigned" to a UI element. To do so, add the class acs-modal-open to it.

The default target of a modal UI is the first element of class acs-modal. This is fine when there is only one modal on the page, or if your code reuses the same modal, e.g. via JavaScript. To address a specific modal, use the data-target attribute to provide a querySelector. The first instance of this selector will be the target modal.

    <div id="modal-number-1" class="acs-modal">
      <div class="acs-modal-content">
        <div>I am modal number 1!</div>
        <button class="acs-modal-close">Close</button>
      </div>
    </div>

    <button class="acs-modal-open" data-target="#modal-number-1">I target modal number 1</button>

Example:

Clicking outside the modal

A close button is not mandatory. Click anywhere outside the modal to close it.

    <div id="modal-number-2" class="acs-modal">
      <div class="acs-modal-content">
        <div>I am modal number 2 and I do not have a close button. Just click outside!</div>
      </div>
    </div>

    <button class="acs-modal-open" data-target="#modal-number-2">I target modal number 2</button>

Example:

Modals and long text

A modal dialog will introduce scrolling automatically.

    <div id="modal-number-3" class="acs-modal">
      <div class="acs-modal-content">
        <div>
          <button class="acs-modal-close">TL;DR, close now!</button>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div>
      </div>
    </div>

    <button class="acs-modal-open" data-target="#modal-number-3">I target modal number 3. I am large!</button>

Example: