Skip to main content

Alert Dialog

Alerts dialog are used to display a message to the user. They are modal, meaning that they block interaction with the rest of the page until the user closes the alert.

Basic usage​

By using the cancel attribute, you can specify an element inside the modal that will close the alert dialog when clicked. Moreover, this element will be focused when the alert dialog is opened.

tip

With the modern theme, add the blur class to the alert dialog to blur the background when the alert dialog is opened.

Are you sure you want to do this? This is permanent!
 

<button data-alert="#myalert">Open alert dialog</button>

<bl-alert-dialog title="Are you sure?" id="myalert" cancel="#myCancelBtn" class="blur">
  <div>Are you sure you want to do this? This is permanent!</div>
  <div>
    <button id="myCancelBtn">No</button>
    <button>Yes</button>
  </div>
</bl-alert-dialog>