How to add modal trigger inserted by custom code

Design help Custom code
1

I have built a modal and trigger it by certain class.

if I add an element to site using editor, it works, it shows the modal. If I add exactly same html through custom code, it does not.

An example:
Code inserted to page from editor
< a href=“#” class=“modal-trigger”>page</ a>
This opens modal OK

Code inserted from custom code
< a href=“#” class=“modal-trigger”>Custom code</ a>
This shows up, but does not open the modal.

The latter is inserted as:
const linkToAdd = “< a href=‘#’ class=‘modal-trigger’>Custom code</ a>”;
var modalTrigger = document.querySelector(“#div-test-container”);
modalTrigger.innerHTML = linkToAdd ;

Thanks for any help!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Is it an interactions-based modal?
If so, and you’re generating the modal code dynamically, you probably need to re-initialize IX2 so that Webflow can wire up the interactions to your new elements.

IIRC-

window.Webflow && window.Webflow.require( 'ix2' ).init();
3

Than you Memetican / Michael, that helped!

Meanwhile I realized that actually I was using page settings and wrote the code there, before closing body -tag. But here right after writing the question, I tested same code within added custom code and it worked. Then, after reading your answer, I added that line to code before end of body, to page settings, and it worked also from there.

Hope these help also others who might have similar issues.

Thanks again!

1 Like