Modal popup

dobradovic — Fri, 25 Dec 2020 10:59:50 GMT

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

Re: Modal popup

Chris-M — Mon, 28 Dec 2020 00:27:01 GMT

Hello @dobradovic,

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

https://getbootstrap.com/docs/4.0/components/modal/

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

Re: Modal popup

dobradovic — Mon, 28 Dec 2020 13:07:38 GMT

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 🙂

Re: Modal popup

Anton — Mon, 28 Dec 2020 14:03:00 GMT

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

<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

require JS

best,

Anton

topic Re: Modal popup in CMS Development

Modal popup

Re: Modal popup

Re: Modal popup

Re: Modal popup