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.
we extended more options to bootstrap modals by adding different positioning classes to the modal to use it.
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.<!-- Modal -->
<div class="modal fade modal-slide-right" id="slideRightModal" tabindex="-1" role="dialog"
aria-labelledby="slideRightModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="slideRightModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
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.<!-- Modal -->
<div class="modal fade modal-slide-left" id="slideLeftModal" tabindex="-1" role="dialog"
aria-labelledby="slideLeftModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="slideLeftModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
we extended more options to bootstrap modals by adding different positioning classes to the modal to use it.
<div class="modal fade modal-bottom-right" id="positionModal" tabindex="-1" role="dialog"
aria-labelledby="BottomRightLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="slideRightModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
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 |
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#exampleModal">
Launch demo modal
</button>
Atmos modal inherits bootstrap 4 modal methods and events.
Last modified 5yr ago