# Custom module insert into custom module?

**URL:** <https://community.hubspot.com/t/custom-module-insert-into-custom-module/29549>\
**Category:** CMS Development\
**Tags:** design-manager, free, starter\
**Created:** [December 28, 2020, 1:35pm UTC](https://community.hubspot.com/t/custom-module-insert-into-custom-module/29549 "2020-12-28T13:35:08Z")\
**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 28, 2020, 1:35pm UTC](https://community.hubspot.com/t/custom-module-insert-into-custom-module/29549/1 "2020-12-28T13:35:08Z")

</div>

How can I add my custom module to already existing custom module in landing page?

I have landing page with tabs and I want to insert my custom module - modal popup into each of these tabs?

To be more clear - I have custom module for this 4 tabs (screenshot)

 ![35795i66BBECB0265F59D7.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/3/03a6dcf88222620f38476ad221503b47469a4f19.png)

It is my custom module which contains four tabs, four rich text fields and I want in that rich text field to add my already made custom module for modal popup window, when user click on authors name for example.

Is it possible?

Tnx for your time 🙂

---

<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, 4:55pm UTC](https://community.hubspot.com/t/custom-module-insert-into-custom-module/29549/2 "2020-12-28T16:55:23Z")

</div>

Hi @dobradovic,

unfortunately this is not possible.

If you want to have the functionality of a module inside another one you’ll need to recreate the functions inside the “first” module.

But since you’re talkin about modal boxes in multiple threads I would suggest you to work with something like a “lightbox”(e.g: [this](https://lokeshdhakar.com/projects/lightbox2/)). This would make your live much more easier since you can add the JS&CSS globaly and modify your img tag as follows:

```lia-code-sample
{#regular img code #}
<img src="{{module.image.src}}" alt="{{module.image.alt}}">

{# img-code with lightbox #}
<img src="{{module.image.src}}" alt="{{module.image.alt}}" class="lightbox">

```

if you want it to be “bulletproof” write a small jQuery/JavaScript code which will search for every img-tag inside the body-wrapper and add the lightbox class.

Attention: If you don’t add a specific class to the desired templates this could lead to unwanted results like the lightbox in the blog listing view or similiar.

best,

Anton

---

<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, 5:53pm UTC](https://community.hubspot.com/t/custom-module-insert-into-custom-module/29549/3 "2020-12-28T17:53:20Z")

</div>

Hi, tnx for answer. It seems like you didnt understand me, sorry if I wasnt clear.

I need something like modal pop-up when user click on the text not image. So I built custom module for my tabs which is rich text that I mentioned before and I made custom module for bootstrap modal pop-up.

In short I want to make popup modal window when user click on some text in my custom built module which is tabs with four rich text fields.

Thanks Anton, every advice on how I can do this would be nice.

---

<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, 6:43pm UTC](https://community.hubspot.com/t/custom-module-insert-into-custom-module/29549/4 "2020-12-28T18:43:55Z")

</div>

Hi @dobradovic,

thanks for the informations. I’ve did something similar a few days ago for my company and the most easiest way would be not to use a rich-text since it requires that the user has to apply the “modal-box-opener” in the source-code view in the rich-text. If you do this by yourself or a colleague who is familiar with html it’s ok. A better solution would be to implement a button or similar which will be always displayed at the same position(e.g after your rich-text). By doing so the user don’t need to know HTML and doesn’t require a manual how to “activate” the modal-box functionality.

It’s up to you 🙂

Here’s my code(just a snippet from the whole module) for inspiration:

```lia-code-sample
{# Modalbox activation begin #}
<a class="btn btn-secondary" data-toggle="modal" data-target="#{{ module.right_col.button_name|replace(' ','-')|replace('_','-') }}">{{ module.right_col.buttontext }}</a>

{# Modalbox activation end #}

...

{#Modalbox begin #}
<div class="modal fade" id="{{ module.right_col.button_name|replace(' ','-')|replace('_','-') }}" tabindex="-1" role="dialog" aria-labelledby="{{ module.right_col.button_name|replace(' ','-')|replace('_','-') }}" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-body">
 {# Modalbox content#}
 </div>
 </div>
 </div>
</div>
{# Modalbox end #}

{% require_js %}
		<script>
$('#{{ module.right_column.button_name|replace(' ','-')|replace('_','-') }}').modal();
</script>
		{% end_require_js %}

```

I’m using:

- button name (regular text)

- buttontext(regular text)

If you’re using a [repeater function(for-loops)](https://developers.hubspot.com/docs/cms/hubl/for-loops) you should add your modalbox function to the repeater group. The code could look something like this:

```lia-code-sample
{% for item in tabs %}
{# Modalbox activation begin #}
<a class="btn btn-secondary" data-toggle="modal" data-target="#{{ item.right_col.button_name|replace(' ','-')|replace('_','-') }}">{{ item.right_col.buttontext }}</a>

{# Modalbox activation end #}
{% endfor %}
...
{% for item in tabs %}
{#Modalbox begin #}
<div class="modal fade" id="{{ item.right_col.button_name|replace(' ','-')|replace('_','-') }}" tabindex="-1" role="dialog" aria-labelledby="{{ item.right_col.button_name|replace(' ','-')|replace('_','-') }}" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-body">
 {# Modalbox content#}
 </div>
 </div>
 </div>
</div>
{# Modalbox end #}

{% for item in tabs %}
{% require_js %}
		<script>
$('#{{ item.right_column.button_name|replace(' ','-')|replace('_','-') }}').modal();
</script>
		{% end_require_js %}

{% for item in tabs %}

```

note: You don’t need multiple for loops at each part if you put everything inside one col. But I recomend to split it so that the modal box and the JS are at the very bottom of your HTML+Hubl section - this will make debugging easier.

Also: note that my code shows “module.right\_col.XY” this is because I’ve grouped everything in my module into several columns and called them accoringly. This is optional but it will make the creation of new content easier since it’s structured.

best,

Anton