Modals

Modals are created using Bootstrap Native Modals, they will work as the same way how it works in bootstrap. To run a Bootstrap Modal, there is no dependencies, you do not have to include extra JS or CSS files,To add a modal please refer following guidelines.
Modal
getbootstrap
Modal Variations
we extended more options to bootstrap modals by adding different positioning classes to the modal to use it.
Slide right modal
Simply add the class modal-slide-right to main modal DIV Your HTML tag structure should look like this. You can change the id attribute of the modal to anything you want.
1
<!-- Modal -->
2
<div class="modal fade modal-slide-right" id="slideRightModal" tabindex="-1" role="dialog"
3
     aria-labelledby="slideRightModalLabel" aria-hidden="true">
4
    <div class="modal-dialog" role="document">
5
        <div class="modal-content">
6
            <div class="modal-header">
7
                <h5 class="modal-title" id="slideRightModalLabel">Modal title</h5>
8
                <button type="button" class="close" data-dismiss="modal"
9
                        aria-label="Close">
10
                    <span aria-hidden="true">&times;</span>
11
                </button>
12
            </div>
13
            <div class="modal-body">
14
                ...
15
            </div>
16
            <div class="modal-footer">
17
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
18
                    Close
19
                </button>
20
                <button type="button" class="btn btn-primary">Save changes</button>
21
            </div>
22
        </div>
23
    </div>
24
</div>
Copied!
Slide left
Simply add the class modal-slide-left to main modal DIV Your HTML tag structure should look like this. You can change the id attribute of the modal to anything you want.
1
<!-- Modal -->
2
<div class="modal fade modal-slide-left" id="slideLeftModal" tabindex="-1" role="dialog"
3
     aria-labelledby="slideLeftModalLabel" aria-hidden="true">
4
    <div class="modal-dialog" role="document">
5
        <div class="modal-content">
6
            <div class="modal-header">
7
                <h5 class="modal-title" id="slideLeftModalLabel">Modal title</h5>
8
                <button type="button" class="close" data-dismiss="modal"
9
                        aria-label="Close">
10
                    <span aria-hidden="true">&times;</span>
11
                </button>
12
            </div>
13
            <div class="modal-body">
14
                ...
15
            </div>
16
            <div class="modal-footer">
17
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
18
                    Close
19
                </button>
20
                <button type="button" class="btn btn-primary">Save changes</button>
21
            </div>
22
        </div>
23
    </div>
24
</div>
Copied!
Modal Positions
we extended more options to bootstrap modals by adding different positioning classes to the modal to use it.
1
<div class="modal fade  modal-bottom-right" id="positionModal" tabindex="-1" role="dialog"
2
     aria-labelledby="BottomRightLabel" aria-hidden="true">
3
    <div class="modal-dialog" role="document">
4
        <div class="modal-content">
5
            <div class="modal-header">
6
                <h5 class="modal-title" id="slideRightModalLabel">Modal title</h5>
7
                <button type="button" class="close" data-dismiss="modal"
8
                        aria-label="Close">
9
                    <span aria-hidden="true">&times;</span>
10
                </button>
11
            </div>
12
            <div class="modal-body">
13
                ...
14
            </div>
15
            <div class="modal-footer">
16
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
17
                    Close
18
                </button>
19
                <button type="button" class="btn btn-primary">Save changes</button>
20
            </div>
21
        </div>
22
    </div>
23
</div>
Copied!
Position Options:
Simply add the class positionclass to main modal DIV Your HTML tag structure should look like this. You can change the id attribute of the modal to anything you want.
Position class 
Position
modal-top-left
page top left
modal-top-right
page top right
modal-bottom-left
page bottom left
modal-bottom-right
page bottom right
modal-bottom-center
page bottom center
Calling a Modal
1
<button type="button" class="btn btn-primary" data-toggle="modal"
2
        data-target="#exampleModal">
3
    Launch demo modal
4
</button>
Copied!
Atmos modal inherits bootstrap 4 modal methods and events.

UI Elements - Previous

Alerts

Next - UI Elements

Avatar

Last modified 3yr ago

Copy link

Contents

Modal Variations

Modal Positions

Calling a Modal