JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: none;">
    <a id="trigger" href="#popup">&nbsp;</a>
    <div id="popup" style="width: 250px; height: 400px;">
        <p>This would be an aweber form.</p>
    </div>
</div>

JavaScript

function PopIt() { 
    $("a#trigger").trigger('click');
    window.onbeforeunload = UnPopIt;
    return "Would you like to join our mailing list for other offers?"; 
}

function UnPopIt()  { /* nothing to return */ } 

$(document).ready(function() {
    window.onbeforeunload = PopIt;

    $("a#trigger").fancybox({
        'hideOnContentClick': false,
        'showCloseButton': false
    });

    $("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});