Modal JS

A simple pop-up modal that you can trigger by toggling a class name.

Adding a modal

A modal consists of three parts:

.modal
  | .modal-content
  | .modal-close

Visually, the .modal class creates the black background and frame for the content. The .modal-content is a white block containing what you want your modal to show. Finally, .modal-close is a close button. CSS does not insert the cross by itself; you need to add the × escape manually.

Please bear in mind that Magic is not packaged with any JS at all, so you will need to add some custom JavaScript to make modals appear and disappear.

To add the modal demonstrated above:

<div class="modal">
  <div class="modal-content">
    <p>Hello!</p>
  </div>
  <button class="modal-close">&times;</button>
</div>

Advanced Modal

To add an advanced modal instead, try this:

<div class="modal">
  <div class="modal-adv">
    <div class="modal-adv-title">
      <h1 class="modal-adv-title-text">Modal</h1>
      <button class="modal-adv-title-close">&times;</button>
    </div>
    <div class="modal-adv-body">
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class="modal-adv-footer">
      <button class="btn btn-green">Save</button>
      <button class="btn btn-dark">Cancel</button>
    </div>
  </div>
</div>

Toggling modals

To toggle modals, simply create some JavaScript that toggles the class active on the <div class="modal"> element. When the class is present, the modal will be displayed; otherwise it will be hidden. Modals can be placed anywhere on the page.