Modal Component

The classic superimposed windows, in which you can include any content you want. Simple and powerful.

Basic structure

This is the basic structure for building a modal window.

<div class="e-modal">
  <div class="e-modal-content eUp">
    <header class="e-modal-header">
      <p class="e-modal-title">Modal title</p>
      <button type="button" class="e-delete">
        <i aria-hidden="true">&times;</i>
      </button>
    </header>
    <div class="e-modal-body">
      <p>All the content goes here.</p>
    </div>
    <footer class="e-modal-footer">
      <button class="e-btn inverted">Cancel</button>
      <button class="e-btn danger">Save changes</button>
    </footer>
  </div>
</div>

To activate the modal, just add the .launch modifier on the .e-modal container

Warning does not include javascript

We do not include Javascript, you will have to create or investigate to add the class .launch

Change animations

You can change the animations of the modal using one of the animations that we already include.

See animations

<div class="e-modal">
                        <!-- Change -->
  <div class="e-modal-content eUp">
  <!-- ePull, eSlide, eRight, eFade -->
  </div>

</div>

Contribute on GitHub

Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

One-time donation

Donate

Serious sponsor

Become a Patron