Modal dialog

Default modal dialog

<div class="env-modal-dialog doc-demo__modal" role="dialog" aria-labelledby="myDialog" aria-hidden="true" tabindex="-1">
   <div class="env-modal-dialog__dialog">
      <section class="env-modal-dialog__content">
         <header class="env-modal-dialog__header">
            <h4 class="env-text env-modal-dialog__header__title">Modal Header</h4>
         </header>
         <div class="env-modal-dialog__body">
            <p class="env-text">Caticus cuteicus wake up wander around the house making large amounts of noise jump on top of your human's bed
               and fall asleep.</p>
         </div>
         <footer class="env-modal-dialog__footer">
            <button type="button" class="env-button env-button--primary">Save</button>
            <button type="button" data-modal-dialog-dismiss class="env-button env-button--link">Cancel</button>
         </footer>
      </section>
   </div>
</div>

Optional sizes

Uses env-modal-dialog__dialog--large and footer env-modal-dialog__footer--right aligning footer descendents to the right.

<button id="largeBtn" data-modal-dialog data-target="#example1" type="button" class="env-button env-button--primary env-button--large">Show large</button>

<div id="example1" class="env-modal-dialog" role="dialog" aria-labelledby="myDialog" aria-hidden="true" tabindex="-1">
   <div class="env-modal-dialog__dialog env-modal-dialog__dialog--large">
      <section class="env-modal-dialog__content">
         <header class="env-modal-dialog__header">
            <h5 class="env-text env-modal-dialog__header__title">Modal Header</h5>
         </header>
         <div class="env-modal-dialog__body">
            <p class="env-text">Caticus cuteicus wake up wander around the house making large amounts of noise jump on top of your human's bed
               and fall asleep.</p>
         </div>
         <footer class="env-modal-dialog__footer env-modal-dialog__footer--right">
            <button type="button" class="env-button env-button--primary">Save</button>
            <button type="button" data-modal-dialog-dismiss class="env-button env-button--link">Cancel</button>
         </footer>
      </section>
   </div>
</div>

Uses env-modal-dialog__dialog--small

<button id="smallBtn" data-modal-dialog data-target="#example2" type="button" class="env-button env-button--primary env-button--large">Show small</button>

<div id="example2" class="env-modal-dialog" role="dialog" aria-labelledby="myDialog" aria-hidden="true" tabindex="-1">
   <div class="env-modal-dialog__dialog env-modal-dialog__dialog--small">
      <section class="env-modal-dialog__content">
         <header class="env-modal-dialog__header">
            <h6 class="env-text env-modal-dialog__header__title">Modal Header</h6>
         </header>
         <div class="env-modal-dialog__body">
            <p class="env-text">Caticus cuteicus wake up wander around the house making large amounts of noise jump on top of your human's bed
               and fall asleep.</p>
         </div>
         <footer class="env-modal-dialog__footer">
            <button type="button" class="env-button env-button--primary">Save</button>
            <button type="button" data-modal-dialog-dismiss class="env-button env-button--link">Cancel</button>
         </footer>
      </section>
   </div>
</div>

Methods

Show
$('#myModal').envDialog('show')

Hide
$('#myModal').envDialog('hide')

Toggle
$('#myModal').envDialog('toggle')

Events

hide.env-modal-dialog

$('#myModal').on('hide.env-modal-dialog', function() { 
   // Do something... 
});

hidden.env-modal-dialog

$('#myModal').on('hidden.env-modal-dialog', function() { 
   // Do something... 
});

show.env-modal-dialog

$('#myModal').on('show.env-modal-dialog', function() { 
   // Do something... 
});

shown.env-modal-dialog

$('#myModal').on('shown.env-modal-dialog', function() { 
   // Do something... 
});