Modal (Light-box or pop-up) component on Bootstrap
Tags: beginners, frontend, webdev, css
Published: 2020-05-21 09:55:58


Hello everyone!

I recently worked on a project which included a Bootstrap modal component, so I'd like to explain the process to help you understand this useful component.

I added a modal inside another modal, which both contain a carousel inside, another Bootstrap component which I tackle in [this post](https://dev.to/albertoroldanq/carousels-in-bootstrap-h1).

First Modal, centered on the screen with close button customised and containing a carousel.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w765bzftekyydc5o12kl.png)

Second Modal centered on the screen with another close button customised and containing another carousel.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t8sgzfm2b6kzm94mj6hp.png)


#### Choose the modal
Pick the modal you want to add to your project from [Bootstrap Documentation section](https://getbootstrap.com/docs/4.0/components/modal/)
In this example, we will work with the "vertically centered" although we will set some other features.

The first step will be inserting an element (outside our Modal) that triggers the modal, which can be a `button`, `<a>`, etc. Where the `href` will be pointing our Modal `id`



- Button to display the first modal `href="#myModal"`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7xkimjvu70adbp9qmoy7.png)

- First Modal `id="myModal"`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y7zdokiv0j768nei9xbm.png)

- Button to display the second modal `href="#myModal2"`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4rbuzruqha2hj1vtkboc.png)
- Second Modal `id="myModal2"`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ltg31tut67yf3dv4sjks.png)

If we want to avoid our modal closes when we click outside it, we need to set `data-backdrop="static"`

In the [Bootstrap Documentation](https://getbootstrap.com/docs/4.0/components/modal/) you can find more elements you can add inside your modal such as header, title, and footer. In this example, I've removed them to keep only the [carousel interface](https://dev.to/albertoroldanq/carousels-in-bootstrap-h1).

**Important**
Once we have added all our content inside our modals, we need to set the close button. Even if you choose to use the default button included in the [Bootstrap Documentation](https://getbootstrap.com/docs/4.0/components/modal/), if you are using two modals at a time as in this example, it will be necessary to add the following code in our `button` or `a` element. **At least in the second modal**.

    href="#" onclick="$('#myModal2').modal('hide');

- Button to close the first Modal
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ksrg8qrd3izttq5ge7ms.png)

- Button to close the second Modal
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iarnmnm7v03dd09ozhhy.png)

If we used instead `data-dismiss="modal"`  it would close all the modals that are open.


And finally, we can set a custom style to the modal, background, borders, etc. Let me know in the comments if you want to know more about styling a modal.

I hope to have helped you understand a little bit more the modal component. If you want to know more about the carousel component take a look at [this post](https://dev.to/albertoroldanq/carousels-in-bootstrap-h1).

**If you are planning to look for a job [this list](https://dev.to/albertoroldanq/remote-jobs-sites-4hbf) of remote jobs sites could be a great resource!**

Don't forget to bookmark the post if it's useful.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qhukd68mdf1x0dko6xxf.png)

If you liked what you read.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/myvwcmge2y86d0fu149m.png)   

**Let's keep in touch:**
- **Follow me on [Instagram](https://www.instagram.com/albertoroldanq/)**
- **Add me to your contacts on [Linkedin](https://www.linkedin.com/in/albertoroldanq/)**

Thank you for reading! **Some feedback would be awesome!**
Leave a comment to share your thoughts, ask questions or just to say hello!