Modal

A modal is a dialog box/popup window that is displayed on top of the current page. It is used to display information or capture user input. When the modal is open, the interaction with the background is disabled and the focus is trapped inside the modal.

Basic usage

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci commodi culpa dolore dolorem doloremque ducimus illo, itaque iure laborum maxime mollitia nemo neque optio, pariatur, reiciendis tenetur veritatis voluptate voluptatibus?

<button data-modal="#mymodal">Open modal</button>

<bl-modal title="This is a modal" id="mymodal">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci commodi
    culpa dolore dolorem doloremque ducimus illo, itaque iure laborum maxime
    mollitia nemo neque optio, pariatur, reiciendis tenetur veritatis
    voluptate voluptatibus?
</bl-modal>

Simply add the blur class to the modal to blur the background.

<button data-modal="#mymodal">Open modal</button>

<bl-modal title="This is a modal" id="mymodal" class="blur">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci commodi
    culpa dolore dolorem doloremque ducimus illo, itaque iure laborum maxime
    mollitia nemo neque optio, pariatur, reiciendis tenetur veritatis
    voluptate voluptatibus?
</bl-modal>

When the modal is open, the focus is trapped inside the modal. This means that the user cannot interact with the background or the rest of the page.

First name:

Last name:

Username:

Password:

Modal

Basic usage​

Modal with blurred background​

Focus trapped inside modal​

Basic usage

Modal with blurred background

Focus trapped inside modal