# Modal popup

**URL:** <https://community.hubspot.com/t/modal-popup/29539>\
**Category:** CMS Development\
**Tags:** design-manager, free, starter\
**Created:** [December 25, 2020, 10:59am UTC](https://community.hubspot.com/t/modal-popup/29539 "2020-12-25T10:59:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dobradovic](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dobradovic/32/14727_2.png) [@dobradovic](https://community.hubspot.com/u/dobradovic)\
**Post date:** [December 25, 2020, 10:59am UTC](https://community.hubspot.com/t/modal-popup/29539/1 "2020-12-25T10:59:50Z")

</div>

What is best way to create modal popup on click on image or text?

---

<div class="post-metadata">

**Author:** ![Chris-M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/chris-m/32/61599_2.png) [@Chris-M](https://community.hubspot.com/u/Chris-M)\
**Post date:** [December 28, 2020, 12:27am UTC](https://community.hubspot.com/t/modal-popup/29539/2 "2020-12-28T00:27:01Z")

</div>

Hello @dobradovic,

an easy way for modal boxes is a custom module with bootstrap4.

> **[Modal](https://getbootstrap.com/docs/4.0/components/modal/)**
>
> Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Load in the CDN of JS and CSS.

Start a Custom Module and put in the code of the bootstrap page.  
This should give you an good example of the Modal Box.

- Chris

---

<div class="post-metadata">

**Author:** ![dobradovic](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dobradovic/32/14727_2.png) [@dobradovic](https://community.hubspot.com/u/dobradovic)\
**Post date:** [December 28, 2020, 1:07pm UTC](https://community.hubspot.com/t/modal-popup/29539/3 "2020-12-28T13:07:38Z")

</div>

Hi, tnx for answer. Where should I load in the CDN of JS and CSS? Im very new to hubspot. Should I load this in custom module somewhere or?

Tnx 🙂

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [December 28, 2020, 2:03pm UTC](https://community.hubspot.com/t/modal-popup/29539/4 "2020-12-28T14:03:00Z")

</div>

Hi @dobradovic,

you can either upload the file into the file-manager or the design-manager or set it up directly in the desired page or page-wide settings(settings-\>website-\>pages-\>website-header).

If you upload it into the file-manager you can load it via your page settings(settings-website-pages) or in your template. Personally I don’t recomend this because it will have an impact on page speed because you’ll load the script even if you don’t use the module/function.

If you upload it to the design-manager you can load it via your module(right sidebar of the module). If you go this way the benefit would be that your css/js file(s) would only load if you use this module. And only once(even if you use the module multiple times on a single page).

Tipp: If you want to give the user(the one who will use this module) the option to enable or disable the popup function in each module you could do something like this in the HTML+Hubl section of your module:

- create a boolean function in your module(I’ve called mine “enable Lightbox”) and write your code something like this

```lia-code-sample
<img src="{module.your_IMG.src}" class="{% if module.enable_lightbox%}lightboxclass{% endif %}">

{% if module.enable_lightbox%}
{{require_js("Link-to-your-js","footer")}}
{{require_css("Link-to-your-css")}}
{% endif %}

```

here some links how to use the required\_options:

[require CSS](https://developers.hubspot.com/docs/cms/hubl/functions#require-css)

[require JS](https://developers.hubspot.com/docs/cms/hubl/functions#require-js)

best,

Anton