CMS Development

grantfoster
投稿者

Embedding a popup meetings dialogue

解決

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 いいね!
1件の承認済みベストアンサー
grantfoster
解決策
投稿者

Embedding a popup meetings dialogue

解決

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 いいね!
2件の返信
grantfoster
解決策
投稿者

Embedding a popup meetings dialogue

解決

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 いいね!
roisinkirby
HubSpot製品開発チーム
HubSpot製品開発チーム

Embedding a popup meetings dialogue

解決

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

0 いいね!