Modal

The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.

@import url(https://vera-ui.netlify.app/styles/modal.css)

<link rel="stylesheet" href="https://vera-ui.netlify.app/styles/modal.css">

A Simple Modal

You can click on the cross button or anywhere outside the modal to close it.

<div class="modal-container">
    <button class="btn btn-primary" id="modal-button">
      Open Modal
    </button>

    <div class="modal">
      <div class="modal-content">
        <div class="modal-title">
          <span>Delete Permanently</span>
          <span class="modal-close">&times;</span>
        </div>
        <div class="modal-description">
          <p>Are you sure you want to delete?</p>
        </div>
        <div class="modal-buttons">
          <button class="btn" id="cancel">Cancel</button>
          <button class="btn btn-primary" id="delete">Delete</button>
        </div>
      </div>
    </div>
</div>