Default

Example

This is the title of a modal

Fusce id lorem quis ante convallis ornare. Etiam at ultricies leo, quis aliquam est. In laoreet justo consequat hendrerit gravida. Donec eu lobortis nulla, vel efficitur ex.

 
1
2
3
4
5
6
7
8
9
10
11
12
13

<dialog class="ox-modal" open>
    <button type="button" class="ox-modal__close" aria-label="Close the modal"><span class="ox-icon ox-icon--close ox-icon--small"></span></button>
    <div class="ox-modal__body">
        <h3 class="ox-modal__title">This is the title of a modal</h3>
        <p>Fusce id lorem quis ante convallis ornare. Etiam at ultricies leo, quis aliquam est. In laoreet justo consequat hendrerit gravida. Donec eu lobortis nulla, vel efficitur ex.</p>
    </div>
    <div class="ox-modal__footer">
		<div class="ox-button-group ox-button-group--reverse">
			<button type="button" class="ox-button ox-button--secondary"  autofocus="true">Primary action</button>
			<button type="button" class="ox-button ox-button--plain">Cancel</button>
		</div>
    </div>
</dialog>

Working example

By using the default dialog tag, you can open the modal by calling openModal() on the triggering element (in most cases, this wil be a button). Closing it can be done by using close() on all close / cancel buttons. By default the ESC button works.

Dialog tag not yet supported in all browsers

Please note that since the dialog tag isn't fully supported yet in all browsers, in these examples we've implemented a fallback that adds and removes the open attribute from the modal when needed. Check out the source code of the example to see how it's done.

Example

This is the title of a modal

Fusce id lorem quis ante convallis ornare. Etiam at ultricies leo, quis aliquam est. In laoreet justo consequat hendrerit gravida. Donec eu lobortis nulla, vel efficitur ex.

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<button type="button" class="ox-button ox-button--primary" data-modal-trigger="dox-modal-example">Show me the modal!</button>

<dialog class="ox-modal" id="dox-modal-example" aria-labelledby="dox-modal-label" aria-modal="true">
	<button type="button" class="ox-modal__close" aria-label="Close the modal" data-modal-trigger="dox-modal-example"><span class="ox-icon ox-icon--close ox-icon--small"></span></button>
	<div class="ox-modal__body">
		<h3 class="ox-modal__title" id="dox-modal-label">This is the title of a modal</h3>
		<p>Fusce id lorem quis ante convallis ornare. Etiam at ultricies leo, quis aliquam est. In laoreet justo consequat hendrerit gravida. Donec eu lobortis nulla, vel efficitur ex.</p>
	</div>
	<div class="ox-modal__footer">
		<div class="ox-button-group ox-button-group--reverse">
			<button type="button" class="ox-button ox-button--secondary"  autofocus="true">Primary action</button>
			<button type="button" class="ox-button ox-button--plain" data-modal-trigger="dox-modal-example">Cancel</button>
		</div>
	</div>
</dialog>

Side modal

By adding the modifier ox-modal--side to the dialog, you'll get a modal that opens from the right side of the screen. This is used for larger modals with forms in them.

Example

This is the title of a modal

Fusce id lorem quis ante convallis ornare. Etiam at ultricies leo, quis aliquam est. In laoreet justo consequat hendrerit gravida. Donec eu lobortis nulla, vel efficitur ex.

 
1
2
3
4
5
6

<button type="button" class="ox-button ox-button--primary" data-modal-trigger="dox-side-modal-example">Show me the side modal!</button>

<dialog class="ox-modal ox-modal--side" id="dox-side-modal-example" aria-labelledby="dox-side-modal-label" aria-modal="true">
	<button type="button" class="ox-modal__close" aria-label="Close the modal" data-modal-trigger="dox-side-modal-example"><span class="ox-icon ox-icon--close ox-icon--small"></span></button>
	...
</dialog>