Modal

An example of a simple modal. This runs purely on the front-end with some simple CSS and JS.

Modal

Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention. Users can always dismiss a modal via the "Escape" key or by clicking the ✕ icon.

Client

<button onclick="_M.openModal('modal-1')">Open Modal 1</button>
<button onclick="_M.openModal('modal-2')">Open Modal 2</button>

<m:modal id="modal-1" title="💡 Example with title">
    <p>This is a sample modal (1). This one has a title.</p>
    <p>Try pressing 'Esc' to close this.</p>
</m:modal>

<m:modal id="modal-2">
    <p>This is another sample modal (2). This one has <strong>no</strong> title.</p>
</m:modal>

Server

import io.getmedusa.medusa.core.annotation.UIEventPage;

@UIEventPage(path = "/detail/modal", file = "/pages/modal.html")
public class ModalController { }

Custom modal CSS

By default, Medusa comes with a simple pre-defined style. If you want to customize the CSS, you can simply define custom rules

The following classes are used:

modal-background: Encompasses everything, contains rules on the darkness of the background
modal-container: Encompasses just the modal itself. Can be used for sizing, padding or overall rules
modal-header: Encompasses all header components (such as the title and the close button)
modal-title: h3 tag with title
modal-close: button tag that closes the modal
modal-content: div tag that wraps the entire content you provide in the m:modal tag