> For the complete documentation index, see [llms.txt](https://docs.atomui.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.atomui.com/ui-elements/modals.md).

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.atomui.com/ui-elements/modals.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.