Embedding a popup meetings dialogue

Developer Support CMS Development
1

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=396606&tc_deviceCategory=undefined&template_layout_id=5002014864&updated=1522960853443

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);
});
2

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

3

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!