> For the complete documentation index, see [llms.txt](https://lorvent.gitbook.io/admire/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lorvent.gitbook.io/admire/html/html-structure/main-content/modals.md).
# Modals
This feature is found in the [Modal](http://admire.lorvent.in/modal.html) page of this Template.
There are Nine different kinds of modals included in the above mentioned page. Upon the click on each button a pop up with different fashion appears on the screen.
**1) Basic Modals**
It has the following Structure:
This is the syntax for the button and with the click on a button, the control goes to the code shown below to display the modal
```
```
Modal Syntax:
```
....
....
```
We can learn more about modals at [Modals](http://getbootstrap.com/).
**2) Color Variation:**
It has the following Structure:
This is the syntax for the button and with the click on a button, the control goes to the code shown below to display the modal.
```
```
Modal Syntax:
```
....
....
```
We can learn more about modals at [Modals](http://getbootstrap.com/).
**3) Fade And Slide Effects:**
It has the following Structure:
This is the syntax for the button and with the click on a button, the control goes to the code shown below to display the modal.
```
```
Modal Syntax:
```
....
....
```
We can control the animations for these modals through Js. The code for which is shown below:
```
$(".fade in").on("click","function") {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$("#modal-1").addClass("animated fadeIn").one("animationEnd","function()") {
$("this").removeClass("animated fadeIn");
});
});
```
We can learn more about modals at [Modals](http://getbootstrap.com/).
**4) Transition Effects:**
It has the following Structure:
This is the syntax for the button and with the click on a button, the control goes to the code shown below to display the modal.
```
```
Modal Syntax:
```
....
....
```
We can control the animations for these modals through Js. The code for which is shown below:
```
$(".swing").on("click","function") {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$("#modal-swing").addClass("animated swing").one("animationEnd","function()") {
$("this").removeClass("animated swing");
});
});
```
We can learn more about modals at [Modals](http://getbootstrap.com/).
**5) Rotate Effects:**
It has the following Structure:
This is the syntax for the button and with the click on a button, the control goes to the code shown below to display the modal.
```
```
Modal Syntax:
```
....
....
```
We can control the animations for these modals through Js. The code for which is shown below:
```
$(".rotatein").on("click","function") {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$("#modal-rotatein").addClass("animated rotateIn").one("animationEnd","function()") {
$("this").removeClass("animated rotateIn");
});
});
```
We can learn more about modals at [Modals](http://getbootstrap.com/).
**6) Bouncing Effects:**
It has the following Structure:
This is the syntax for the button and with the click on a button, the control goes to the code shown below to display the modal.
```
```
Modal Syntax:
```
....
....
```
We can control the animations for these modals through Js. The code for which is shown below:
```
$(".bounceinright").on("click","function") {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$("#modal-rotatein").addClass("bounceInRight").one("animationEnd","function()") {
$("this").removeClass("bounceInRight");
});
});
```
We can learn more about modals at [Modals](http://getbootstrap.com/).
**7) Extended Modals:**
It has the following Structure:
This is the syntax for the button and with the click on a button, the control goes to the code shown below to display the modal.
```
Responsive
```
Modal Syntax:
```