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>
    <div class="e-modal-body">
      <p>All the content goes here.</p>
    <footer class="e-modal-footer">
      <button class="e-btn inverted">Cancel</button>
      <button class="e-btn danger">Save changes</button>

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

Modal title

All the content goes here.

Change animations

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

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

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.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation

eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor

Become a Patron