For fixed mode add eq-ui-modal-fixed after eq-ui-modal.
To make the modal fullwidth and sticked to the top add eq-ui-modal-fixed-mobile eq-ui-modal-full-sheet-mobile after eq-ui-modal.
For diferent modal sizes add the eq-ui-modal-small or eq-ui-modal-medium after eq-ui-modal.
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.
For set Trigger, specify the Modal ID in data-target or href and add eq-ui-modal-trigger in the class item.
<!-- 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();
});