Modals

For fixed mode add eq-ui-modal-fixed after eq-ui-modal.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec commodo neque, ac feugiat nibh. Praesent sagittis velit quis felis consequat, sit amet vulputate mi ornare. Phasellus tempor leo in ante semper, sit amet mattis ligula commodo. Aenean ornare consectetur eros, non sagittis dui aliquam ac. Sed id orci id dolor molestie gravida. Quisque sit amet laoreet nibh. Quisque luctus lectus tincidunt nunc interdum, nec luctus justo aliquam. Proin eget risus tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tempus turpis et enim ornare placerat. Donec tempor turpis velit, eget scelerisque velit tristique a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum placerat et metus ut semper. Aenean vitae quam non orci rutrum mollis ac non eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor efficitur tristique. Cras lobortis sapien in libero tristique, a pretium turpis ullamcorper. Vivamus quis purus vitae metus laoreet posuere sit amet nec orci. Integer molestie lectus eget viverra efficitur. Phasellus viverra suscipit orci, eget faucibus nunc aliquam id. Nulla facilisi. Nullam accumsan finibus lacinia.

Curabitur mattis magna nec lorem ornare, id pharetra velit pretium. Integer finibus ex non tempor pretium. Sed suscipit fringilla mauris ac lacinia. Aliquam nec sodales justo. Etiam porttitor, augue vel cursus eleifend, nibh lorem ornare tortor, sit amet sodales felis lorem sit amet nisi. Sed feugiat turpis vel tellus venenatis, non aliquet metus rutrum. Cras a magna in nulla mollis pellentesque vel quis est. Morbi quam quam, congue et hendrerit id, imperdiet id nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum laoreet lobortis elit, ac pretium ex sollicitudin et. Integer consectetur tortor vel tortor facilisis laoreet.

Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci. Suspendisse viverra lorem vitae eros tristique, nec sagittis lectus molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam ut sollicitudin ex, non lacinia orci. Curabitur eleifend malesuada congue.

Fusce sit amet libero lorem. Nunc pellentesque consequat nisi, ut posuere lorem viverra id. Aenean tincidunt nulla nec felis lacinia, dignissim efficitur ipsum aliquet. Donec aliquet, sem vel posuere posuere, dui nisi elementum lectus, eget sollicitudin urna sem in arcu. Mauris aliquet, felis quis tempor accumsan, urna quam fringilla leo, a consectetur magna nulla non tortor. Fusce condimentum ultricies odio, sit amet tristique arcu elementum non. Quisque facilisis, ipsum at gravida iaculis, mauris dui congue lectus, sit amet elementum tellus odio id elit. Proin eget sagittis augue. Curabitur sagittis tellus et mi lobortis varius. Duis iaculis orci non tellus suscipit, eget bibendum tortor fringilla.

For diferent modal sizes add the eq-ui-modal-small or eq-ui-modal-medium after eq-ui-modal.

Small Medium

For diferent positions add the eq-ui-modal-top-sheet or eq-ui-modal-bottom-sheet
or eq-ui-modal-left-sheet or eq-ui-modal-right-sheet or eq-ui-modal-full-sheet after eq-ui-modal.

Top Bottom Left Right Full

For set Trigger, specify the Modal ID in data-target or href and add eq-ui-modal-trigger in the class item.

JADE
HTML


// Modal Trigger With href
a.btn.btn-primary.eq-ui-waves-light.eq-ui-modal-trigger(href='#eq-ui-modal-sample1') Show Modal

// Modal Trigger With data-target
button.btn.btn-primary.eq-ui-waves-light.eq-ui-modal-trigger(data-target='eq-ui-modal-sample1') Show Modal

// Modal
#eq-ui-modal-sample1.eq-ui-modal

  // Header
  .eq-ui-modal-header
    .header-title
      i.mdi.mdi-settings.icon.icon-left.icon-24
      span.section-title Modal Header
    ul.right.eq-ui-nav-menu
      li.eq-ui-nav-menu-item-icon
        a.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
          i.mdi.mdi-dots-vertical.icon

  // Content
  .eq-ui-modal-content
    h5 Title
    p
      | Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue.

  // Footer
  .eq-ui-modal-footer
    a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves.eq-ui-secondary-color-text.eq-ui-modal-close(href='#') Agree
    a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves.eq-ui-secondary-color-text.eq-ui-modal-close(href='#') Disagree


<!-- Modal Trigger With href -->
<a href="#eq-ui-modal-sample1" class="btn btn-primary eq-ui-waves-light eq-ui-modal-trigger">Show Modal</a>

<!-- Modal Trigger With data-target -->
<button data-target="eq-ui-modal-sample1" class="btn btn-primary eq-ui-waves-light eq-ui-modal-trigger">Show Modal</button>

<!-- Modal -->
<div id="eq-ui-modal-sample1" class="eq-ui-modal">

    <!-- Header -->
    <div class="eq-ui-modal-header">
        <div class="header-title">
            <i class="mdi mdi-settings icon icon-left icon-24"></i>
            <span class="section-title">Modal Header</span>
        </div>
        <ul class="right eq-ui-nav-menu">
            <li class="eq-ui-nav-menu-item-icon">
                <a class="btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                    <i class="mdi mdi-dots-vertical icon"></i>
                </a>
            </li>
        </ul>
    </div>

    <!-- Content -->
    <div class="eq-ui-modal-content">
        <h5>Title</h5>
        <p>Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue.</p>
    </div>

    <!-- Footer -->
    <div class="eq-ui-modal-footer">
        <a href="#" class="btn btn-default eq-ui-btn-flat eq-ui-waves eq-ui-secondary-color-text eq-ui-modal-close">Agree</a>
        <a href="#" class="btn btn-default eq-ui-btn-flat eq-ui-waves eq-ui-secondary-color-text eq-ui-modal-close">Disagree</a>
    </div>

</div>


// Init with default options
$(document).ready(function(){
    $('.eq-ui-modal-trigger').leanModal();
});

// Init with custom options
$(document).ready(function(){
    $('.eq-ui-modal-trigger').leanModal({
        dismissible: true, // Modal can be dismissed by clicking outside of the modal
        opacity: .5, // Opacity of modal background
        in_duration: 300, // Transition in duration
        out_duration: 200, // Transition out duration
        ready: function() { console.log('Modal Open'); }, // Callback for Modal open
        complete: function() { console.log('Modal Close'); } // Callback for Modal close
    });
});

// Open modals programatically
$(document).ready(function(){
    $('#modal-sample1').openModal();
});

// Close modals programatically
$(document).ready(function(){
    $('#modal-sample1').closeModal();
});

Modals

Modal Types

Modal Sizes

Modal Positions

Modal Structure

jQuery Plugin Options