Embedding a popup meetings dialogue

[grantfoster]

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

[grantfoster · Accepted solution]

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!

[roisinkirby]

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