# 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.

{% embed url="<https://getbootstrap.com/docs/4.1/components/modal/>" %}

### 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.

```markup
<!-- 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">&times;</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>
```

#### 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.

```markup
<!-- 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">&times;</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>
```

### Modal Positions

we extended more options to bootstrap modals by adding different positioning classes to the modal to use it.

```markup
<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">&times;</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>
```

#### 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

```markup
<button type="button" class="btn btn-primary" data-toggle="modal"
        data-target="#exampleModal">
    Launch demo modal
</button>
```

{% hint style="success" %}
Atmos modal inherits bootstrap 4 modal methods and events.
{% endhint %}