CMS Development

grantfoster
Contributor

Embedding a popup meetings dialogue

SOLVE

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 Upvotes
1 Accepted solution
grantfoster
Solution
Contributor

Embedding a popup meetings dialogue

SOLVE

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!

View solution in original post

0 Upvotes
2 Replies 2
grantfoster
Solution
Contributor

Embedding a popup meetings dialogue

SOLVE

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 Upvotes
roisinkirby
HubSpot Product Team
HubSpot Product Team

Embedding a popup meetings dialogue

SOLVE

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

0 Upvotes