CMS Development

grantfoster
Colaborador

Embedding a popup meetings dialogue

resolver

I am trying to embed a popover meetings scheduling window. I can get as far as assigning an event handler to mousleave that will make my meetings window pop up but the issue I'm having is that even though I use a closure, the event keeps firing. You can see my code below and my page here: https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

 

var isOpen = false;

function popup() { if (isOpen === false) { //wraps blur $('body').wrapInner('<div class=blur-all></div>'); //shows overlay $('.meetings-iframe-container').prependTo('body').fadeIn(200); $.getScript('https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js'); return isOpen = true; } }; $(document).mouseleave(function() { popup(); console.log(isOpen); });
0 Me gusta
1 Soluciones aceptada
grantfoster
Solución
Colaborador

Embedding a popup meetings dialogue

resolver

Hi guys!

 

I solved my own issue. I think what was happening was due to this line here:

$('body').wrapInner('<div class=blur-all></div>');

When I wrapped the body in this 'blur-all' div I had created, it somehow triggered React to reload. I assume this because in the console I could see 'App started!' twice. I think this was causing my embedded script to load and run twice.

 

To fix this - instead of wrapping the whole body in a new div container - I just used the jquery method insertBefore(); to add the deiv before the body and not wrap it. This solved my issue!

Ver la solución en mensaje original publicado

0 Me gusta
2 Respuestas 2
grantfoster
Solución
Colaborador

Embedding a popup meetings dialogue

resolver

Hi guys!

 

I solved my own issue. I think what was happening was due to this line here:

$('body').wrapInner('<div class=blur-all></div>');

When I wrapped the body in this 'blur-all' div I had created, it somehow triggered React to reload. I assume this because in the console I could see 'App started!' twice. I think this was causing my embedded script to load and run twice.

 

To fix this - instead of wrapping the whole body in a new div container - I just used the jquery method insertBefore(); to add the deiv before the body and not wrap it. This solved my issue!

0 Me gusta
roisinkirby
Equipo de producto de HubSpot
Equipo de producto de HubSpot

Embedding a popup meetings dialogue

resolver

Thanks for sharing all that detail @grantfoster@ndwilliams3 what would you advise here?

0 Me gusta