Modals & Asides

Modal

For modal reference please refer too Bootstrap's documentation. The following are extra options you can use:

Options

data-backdrop-bg

Change modals backdrop olor to something else:

<div class="modal fade" data-backdrop-bg="bgc-white" ...>
    ...
</div>

data-blur

Add blurred background to modal backdrop

<div class="modal fade" data-blur="true" ...>
    ...
</div>

<div class="modal fade" data-blur="4px" ...> <!-- specify amount of blurring ... default is 2.5px -->
    ...
</div>

.modal-off(sm|md|lg|xl)

Disable modal features in screen sizes above (sm|md|lg|xl)

<div class="modal modal-off-md" ...>
    ...
</div>

For example it is used in Inbox page's menu. The menu is a modal dialog in small devices which is shown using a toggle button, but in larger screens it's not a modal anymore and is always displayed

.modal-fs

Make modal screen almost fullscreen:

<div class="modal fade modal-fs" ...>
    ...
</div>

.modal-dialog-bottom

The modal dialog will appear on bottom

<div class="modal-dialog modal-dialog-bottom">
    ...
</div>

.modal-dialog-static

The modal dialog will appear without motion

Aside

Asides are based on modals and have the same structure, with some additional classes.

Aside Options

The following are available:

.ace-aside

It must be added to all aside elements

.modal-nb

Makes the modal non blocking.
Can be added to asides and modals to make them non-blocking which means the document area will be still accessible/clickable when the modal/aside is open

direction classes

Use the following classes to specify where the aside will be positioned:

• .aside-top top
• .aside-top aside-c top-center
• .aside-top aside-r top-right
• .aside-top aside-l top-left
• .aside-bottom bottom. You should also use .align-items-end class with it.
• .aside-bottom aside-c bottom-center
• .aside-bottom aside-r bottom-right
• .aside-bottom aside-l bottom-left
• .aside-bottom bottom
• .aside-right right
• .aside-right aside-m right center (middle)
• .aside-left left
• .aside-left aside-m left center (middle)
• .aside-center center

.aside-fs

Fullscreen asides ... Better not to use with .modal-nb so that hitting "Esc" button on keyboard hides it!

.aside-below-nav

The aside's will be below navbar

.aside-above-nav

The aside's (z-index) will be above navbar.

.aside-shown-above-nav

The aside's (z-index) will be above navbar when shown.
Foe example, the Support Support Dialog has this so that when it is hidden it's Hey there, if you want to talk ... button is below other "open" asides but when dialog is opened, it's z-index will be above .navbar and other asides.

.aside-hover

The aside will be opened when hovered instead of clicking a button to toggle it

.modal-dismiss

Clicking outside the modal/aside area will hide it

margin classes

Asides with .margin-1 to .margin-5 classes have extra distance from sides

.fade

Will fade in/out the slider instead of slide in/out

<div class="modal modal-nb ace-aside aside-right aside-below-nav" id="aside-2" data-backdrop="false" tabindex="-1" role="dialog" aria-hidden="true">
    ...
</div>

<div class="modal modal-nb modal-dismiss ace-aside aside-top aside-offset" id="aside-top-1" data-backdrop="false" tabindex="-1" role="dialog" aria-hidden="true">
    ...
</div>

Aside Header

.aside-header is inside .modal-dialog and contains the button which triggers the toggling of the aside, like the orange button for settings box in Ace's demo.
However you can use any button to toggle asides and modals.
The parent .modal should have .aside-offset as well:

<div class="modal modal-nb ace-aside aside-top aside-offset" id="aside-top-1" data-backdrop="false" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            ...
        </div>

        <div class="aside-header">
            <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#aside-top-1">
                Toggle Me
            </button>
        </div>
    </div>
</div>

You can use .d-style for .modal element to dynamically hide/show an icon or a button inside .aside-header when modal is hidden/shown.
Please see Dynamic styling for more info:

<div class="d-style modal modal-nb ace-aside aside-top aside-offset" id="aside-top-1" data-backdrop="false" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            ...
        </div>

        <div class="aside-header">
            <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#aside-top-1">
                <i class="fa fa-angle-double-down v-n-show position-center"></i>
                <i class="fa fa-angle-double-up v-show position-center"></i>
            </button>
        </div>
    </div>
</div>

Inside Container

If you have a boxed layout and want the .aside to appear inside the boxed area, you should add .container class to .modal element:

<div class="container container-plus modal modal-nb ace-aside aside-right aside-below-nav" ...>
 ...
</div>

container-plus is optional

Javascript

You can also use aceAside function:

$('#aside-1')
.aceAside({
    placement: 'right',
    dismiss: true,
    belowNav: true,
    extraClass: 'my-2'
})

The following options are available:

placement

which can have the following values:

• t or top top
• tc top-center
• tr top-right
• tl top-left
• b or bottom bottom
• bc bottom-center
• br bottom-right
• bl bottom-left
• r or rigt right
• rc right center (middle)
• l or left left
• lc left center (middle)
• c or center center

margin

Default is 0. Can be from 1 to 5

fade

Default is false. If true aside will fade in/out instead of slide in/out

autohide

Default is false. Set a number and it will autohide after that. For example setting it to 5000 will hide the aside 5 seconds after it's shown

dismiss

Default is false. If true aside will be hidden when clicked outisde of its area

blocking

Default is false. If true aside will be blocking and you can't click/access the other page elements when it is open

backdrop

Default is false. If blocking is true, backdrop can be a custom class to change backdrop color such as bgc-white

container

If true aside will add .container class to .aside and aside will appear inside boxed area. Good only for when you have boxed layout

belowNav

If true aside will appear below navbar

aboveNav

If true aside's z-index will be above navbar

width

Specify aside's width

height

Specify aside's height. You may also need to add scrollbars to .modal-body using ace-scroll attribute.

extraClass

Space-separated classes to be added to .modal element.

Events

The following events are available:

show

Triggered before an aside is shown

hide

Triggered before an aside is hidden

$('#aside-1')
.aceAside({
    ....
})
.on('show.ace.aside', function(e) {
    if (something) e.preventDefault()
})

You can also use modal's shown.bs.modal and hidden.bs.modal events