Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
Components
Accordion CollapseAlertBadgeBoxBreadcrumbButtonCardDropdownLoaderModalModal backdrop CloseModal SizesPaginationProgress BarStepsTabsTagToastToolip
Utilities
Styleguide

Modal

JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Attention: the use of the components needs the squid.js included in the project
Attention + 1: Probably the interaction via Javascript should not work well in SPA applications (independent of the framework React, Angular, Vuejs, etc). For now we have no implementation but we will create in the future, for now just use the styles and create your own implementation
<button type="button" data-modal="modal-id">
  <!-- Button content, data-modal must reference the `id` attribute of the modal -->
</button>
<div class="modal" id="modal-id" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- Modal Title -->
        <button class="button-close modal-exit">
          <i class="far fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <!-- Modal Content -->
      </div>
      <div class="modal-footer">
        <!-- Modal Footer -->
      </div>
    </div>
  </div>
</div>

To close modal when the backdrop is clicked, just remove the data-backdrop="static" attribute to the modal.

<div class="modal" id="modal-id">
  <!-- Content -->
</div>

Just add one of the classes below to .modal-dialog. If no size class is passed, the modal will be the full size of the screen. Where value is one of:

.modal-sm,
.modal-md,
.modal-lg,
.modal-xl