Modal

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Launch demo modal

Modal Title

ModalBody text goes here.

CloseSave changes

Web Component

    <uxf-button variant="primary" onClick="openModal()">Launch demo modal</uxf-button>
    <uxf-modal id="modal" show={show} closeModal={closeModal}>        <div slot="header">            <h5>Modal Title</h5>            <uxf-close-button/>        </div>        <div slot="body">            <p>ModalBody text goes here.</p>        </div>        <div slot="footer">            <uxf-button onClick={closeModal} variant="secondary">Close</uxf-button>            <uxf-button variant="primary">Save changes</uxf-button>        </div>    </uxf-modal>    <script>        const openModal = () => {            const modal = document.querySelector(`#modal`)            modal.show = true;        };            const closeModal = () => {            const modal = document.querySelector(`#modal`)            modal.show = false;        };    </script>

React

export const Example = () => {    const [show, setShow] = useState(false);    const openModal = () => {        setShow(true);    }    const closeModal = () => {        setShow(false);    }    return (        <>            <UxfButton onClick={openModal} variant="primary">Launch demo modal</UxfButton>            <UxfModal show={show} onCloseModal={closeModal}>                <div slot="header">                    <h5>Modal Title</h5>                    <UxfCloseButton />                </div>                <div slot="body">                    <p>ModalBody text goes here.</p>                </div>                <div slot="footer">                    <UxfButton onClick={closeModal} variant="secondary">Close</UxfButton>                    <UxfButton variant="primary">Save changes</UxfButton>                </div>            </UxfModal>        </>    );}

Angular

import { Component } from '@angular/core';
@Component({  selector: 'app-root',  template: `    <uxf-modal #modal>      <div slot="header">        <h5>Modal Title</h5>        <uxf-close-button></uxf-close-button>      </div>      <div slot="body">        <p>ModalBody text goes here.</p>      </div>      <div slot="footer">        <uxf-button variant="secondary" (click)="closeModal(modal)">Close</uxf-button>        <uxf-button variant="primary">Save changes</uxf-button>      </div>    </uxf-modal>
    <uxf-button variant="primary" (click)="openModal(modal)">Open Modal</uxf-button>  `})
export class AppComponent {  openModal(modal: any)  {    modal.el.show = true;
    modal.closeModal.subscribe({      next() {        modal.el.show = false;        this.unsubscribe();      },      error(err: any) {        console.log('Error: ', err);      }    });  }
  closeModal(modal: any)  {    modal.el.show = false;  }}

Static backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Launch static backdrop modal

Modal Title

ModalBody text goes here.

CloseSave changes

Web Component

    <uxf-button variant="primary" onClick="openModal()">Launch static backdrop modal</uxf-button>
    <uxf-modal id="modal" show={show} closeModal={closeModal} backdrop="static" keyboard="false">        <div slot="header">            <h5>Modal Title</h5>            <uxf-close-button/>        </div>        <div slot="body">            <p>ModalBody text goes here.</p>        </div>        <div slot="footer">            <uxf-button onClick={closeModal} variant="secondary">Close</uxf-button>            <uxf-button variant="primary">Save changes</uxf-button>        </div>    </uxf-modal>    <script>        const openModal = () => {            const modal = document.querySelector(`#modal`)            modal.show = true;        };            const closeModal = () => {            const modal = document.querySelector(`#modal`)            modal.show = false;        };    </script>

React

export const Example = () => {    const [show, setShow] = useState(false);    const openModal = () => {        setShow(true);    }    const closeModal = () => {        setShow(false);    }    return (        <>            <UxfButton onClick={openModal} variant="primary">Launch static backdrop modal</UxfButton>                        <UxfModal show={show} onCloseModal={closeModal} backdrop="static" keyboard="false">                <div slot="header">                    <h5>Modal Title</h5>                    <UxfCloseButton />                </div>                <div slot="body">                    <p>ModalBody text goes here.</p>                </div>                <div slot="footer">                    <UxfButton onClick={closeModal} variant="secondary">Close</UxfButton>                    <UxfButton variant="primary">Save changes</UxfButton>                </div>            </UxfModal>        </>    );}

Angular

import { Component } from '@angular/core';
@Component({  selector: 'app-root',  template: `    <uxf-modal #modal backdrop="static" keyboard="false">      <div slot="header">        <h5>Modal Title</h5>        <uxf-close-button></uxf-close-button>      </div>      <div slot="body">        <p>ModalBody text goes here.</p>      </div>      <div slot="footer">        <uxf-button variant="secondary" (click)="closeModal(modal)">Close</uxf-button>        <uxf-button variant="primary">Save changes</uxf-button>      </div>    </uxf-modal>
    <uxf-button variant="primary" (click)="openModal(modal)">Open Modal</uxf-button>  `})
export class AppComponent {  openModal(modal: any)  {    modal.el.show = true;
    modal.closeModal.subscribe({      next() {        modal.el.show = false;        this.unsubscribe();      },      error(err: any) {        console.log('Error: ', err);      }    });  }
  closeModal(modal: any)  {    modal.el.show = false;  }}

Fullscreen Modal

You can use the fullscreen prop to make the modal fullscreen. Specifying a breakpoint will only set the modal as fullscreen below the breakpoint size.

Full screenFull screenbelow smFull screenbelow mdFull screenbelow lgFull screenbelow xlFull screenbelow xxl

Modal Title

ModalBody text goes here.

CloseSave changes

Web Component

    <uxf-button variant="primary" onClick="openModal()">Launch fullscreen modal</uxf-button>
    <uxf-modal id="modal" show={show} closeModal={closeModal} fullscreen>        <div slot="header">            <h5>Modal Title</h5>            <uxf-close-button/>        </div>        <div slot="body">            <p>ModalBody text goes here.</p>        </div>        <div slot="footer">            <uxf-button onClick={closeModal} variant="secondary">Close</uxf-button>            <uxf-button variant="primary">Save changes</uxf-button>        </div>    </uxf-modal>    <script>        const openModal = () => {            const modal = document.querySelector(`#modal`)            modal.show = true;        };            const closeModal = () => {            const modal = document.querySelector(`#modal`)            modal.show = false;        };    </script>

React

export const Example = () => {    const values = [true, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down'];    const [fullscreen, setFullscreen] = useState(true);    const [show, setShow] = useState(false);        const handleShow = (breakpoint) => {        setFullscreen(breakpoint);        setShow(true);    }
    const closeModal = () => {        setShow(false);    }        return (        <>            {values.map((v, idx) => (                <UxfButton class="modal__button--margin" variant="primary" key={idx} onClick={() => handleShow(v)}>                    Full screen                    {typeof v === 'string' && `below ${v.split('-')[0]}`}                </UxfButton>            ))}                        <UxfModal show={show} onCloseModal={closeModal} fullscreen={fullscreen}>                <div slot="header">                    <h5>Modal Title</h5>                    <UxfCloseButton />                </div>                <div slot="body">                    <p>ModalBody text goes here.</p>                </div>                <div slot="footer">                    <UxfButton onClick={closeModal} variant="secondary">Close</UxfButton>                    <UxfButton variant="primary">Save changes</UxfButton>                </div>            </UxfModal>        </>    );}

Angular

import { Component } from '@angular/core';
@Component({  selector: 'app-root',  template: `    <uxf-modal #modal fullscreen>      <div slot="header">        <h5>Modal Title</h5>        <uxf-close-button></uxf-close-button>      </div>      <div slot="body">        <p>ModalBody text goes here.</p>      </div>      <div slot="footer">        <uxf-button variant="secondary" (click)="closeModal(modal)">Close</uxf-button>        <uxf-button variant="primary">Save changes</uxf-button>      </div>    </uxf-modal>
    <uxf-button variant="primary" (click)="openModal(modal)">Open Modal</uxf-button>  `})
export class AppComponent {  openModal(modal: any)  {    modal.el.show = true;
    modal.closeModal.subscribe({      next() {        modal.el.show = false;        this.unsubscribe();      },      error(err: any) {        console.log('Error: ', err);      }    });  }
  closeModal(modal: any)  {    modal.el.show = false;  }}

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

Launch scrollable modal

Modal Title

This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.

This content should appear at the bottom after you scroll.

CloseSave changes

Web Component

    <uxf-button variant="primary" onClick="openModal()">Launch scrollable modal</uxf-button>
    <uxf-modal id="modal" show={show} closeModal={closeModal} scrollable>        <div slot="header">            <h5>Modal Title</h5>            <uxf-close-button/>        </div>        <div slot="body">            <p style="height: 1200px">This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>            <p>ModalBody text goes here.</p>        </div>        <div slot="footer">            <uxf-button onClick={closeModal} variant="secondary">Close</uxf-button>            <uxf-button variant="primary">Save changes</uxf-button>        </div>    </uxf-modal>    <script>        const openModal = () => {            const modal = document.querySelector(`#modal`)            modal.show = true;        };            const closeModal = () => {            const modal = document.querySelector(`#modal`)            modal.show = false;        };    </script>

React

export const Example = () => {    const [show, setShow] = useState(false);    const openModal = () => {        setShow(true);    }    const closeModal = () => {        setShow(false);    }    return (        <>            <UxfButton onClick={openModal} variant="primary">Launch scrollable modal</UxfButton>                        <UxfModal show={show} onCloseModal={closeModal} scrollable>                <div slot="header">                    <h5>Modal Title</h5>                    <UxfCloseButton />                </div>                <div slot="body">                    <p style={{height: "1200px"}}>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>                    <p>ModalBody text goes here.</p>                </div>                <div slot="footer">                    <UxfButton onClick={closeModal} variant="secondary">Close</UxfButton>                    <UxfButton variant="primary">Save changes</UxfButton>                </div>            </UxfModal>        </>    );}

Angular

import { Component } from '@angular/core';
@Component({  selector: 'app-root',  template: `    <uxf-modal #modal scrollable>      <div slot="header">        <h5>Modal Title</h5>        <uxf-close-button></uxf-close-button>      </div>      <div slot="body">        <p style="height: 1200px">This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>        <p>ModalBody text goes here.</p>      </div>      <div slot="footer">        <uxf-button variant="secondary" (click)="closeModal(modal)">Close</uxf-button>        <uxf-button variant="primary">Save changes</uxf-button>      </div>    </uxf-modal>
    <uxf-button variant="primary" (click)="openModal(modal)">Open Modal</uxf-button>  `})
export class AppComponent {  openModal(modal: any)  {    modal.el.show = true;
    modal.closeModal.subscribe({      next() {        modal.el.show = false;        this.unsubscribe();      },      error(err: any) {        console.log('Error: ', err);      }    });  }
  closeModal(modal: any)  {    modal.el.show = false;  }}

Properties

Property	Attribute	Description	Type	Default
backdrop	backdrop		boolean \| string	true
centered	centered		boolean	false
fade	fade		boolean	true
fullscreen	fullscreen		boolean \| string	undefined
keyboard	keyboard		boolean	true
modalFocus	modal-focus		boolean	true
scrollable	scrollable		boolean	false
show	show		boolean	false
size	size		string	"none"

Events

Event	Description	Type
closeModal		CustomEvent<any>
openModal		CustomEvent<any>

---