Modals

They support a number of use cases from user notification to completely custom content and feature a subcomponents, sizes, and more.

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

Basic With Header Fixed

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 bas-ui-modal-small or bas-ui-modal-medium after bas-ui-modal.

Small Medium

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

Top Bottom Left Right Full

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


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

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

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

    <!-- Content -->
    <div class="bas-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="bas-ui-modal-footer">
        <a href="#" class="bas-ui-button bas-ui-button-default bas-ui-button-flat bas-ui-waves secondary-color-text bas-ui-modal-close">Agree</a>
        <a href="#" class="bas-ui-button bas-ui-button-default bas-ui-button-flat bas-ui-waves secondary-color-text bas-ui-modal-close">Disagree</a>
    </div>

</div>

Initialization for modals is only necessary if you create them dynamically.


$(document).ready(function(){
    $('.bas-ui-modal-trigger').bas_ui_modals({
        dismissible: true, // Modal can be dismissed by clicking outside of the modal
        opacity: 0.5, // Opacity of modal background
        in_duration: 300, // Transition in duration
        out_duration: 200, // Transition out duration
    });
});

Option Name	Description
in_duration	The duration of the transition enter in milliseconds. Default: 300
out_duration	The duration of the transition out in milliseconds. Default: 200
opacity	Opacity of modal background. Default: 0.5
dismissible	Modal can be dismissed by clicking outside of the modal. Default: true

To use these inline you have to add them as data attributes.


<!-- Modal Trigger -->
<a data-target="bas-ui-modal-sample1" data-opacity="0.8" data-dismissible="true" class="bas-ui-button bas-ui-button-primary bas-ui-waves-light bas-ui-modal-trigger"></a>

Shows a modal element.


$('.bas-ui-modal-trigger-custom-1').bas_ui_modals('show');

Hides a modal element.


$('.bas-ui-modal-trigger-custom-1').bas_ui_modals('hide');

Option Name	Description
show.bas.modals	This event fires immediately when the show instance method is called.
shown.bas.modals	This event is fired when a modal has been made visible to the user (will wait for CSS transitions to complete).
hide.bas.modals	This event is fired immediately when the hide method has been called.
hidden.bas.modals	This event is fired when a modal has been hidden from the user (will wait for CSS transitions to complete).

Sample event.


$('#bas-ui-modal-sample1').on('shown.bas.modals', function () {
    // do something...
});

Modals

Modal Types

Modal Sizes

Modal Positions

Modal Structure

Initialization

Options

Methods

Events