Custom popup for header click - Magento 2

#magento2

I was trying to implement a custom popup when a header link was clicked. Tried a few options.

1) Magento Modal
2) A JS file with toggleClass
3) DropdownDialog widget - So far the best option

1) Magento Modal
Issues noticed was the overlay was unwanted and the positioning the popup was difficult.

2) A JS file with toggleClass
Issues noticed here was the click away did not close the popup. The same header link had to be clicked to close the popup.

<?php
/** @var \Vendor\Module\Block\Link $block */
/* @var \Magento\Framework\Escaper $escaper */
?>
<li class="header-subscribe" data-mage-init='{"Vendor_Module/js/header-subscribe": {}}'>
    <div class="subscribe-link"></div>

    <div class="content">
        <form class="form subscribe"
              novalidate
              action="<?= $escaper->escapeUrl($block->getFormActionUrl()) ?>"
              method="post"
              data-mage-init='{"validation": {"errorClass": "mage-error"}}'
              id="newsletter-validate-detail">
            <div class="field newsletter">
                <div class="control">
                    <label for="newsletter">
                        <input name="email"
                               type="email"
                               id="newsletter-popup"
                               placeholder="<?= $escaper->escapeHtml(__('Your email')) ?>"
                               data-mage-init='{"mage/trim-input":{}}'
                               data-validate="{required:true, 'validate-email':true}"
                        />
                    </label>
                </div>
            </div>
            <div class="actions">
                <button class="action subscribe primary"
                        title="<?= $escaper->escapeHtmlAttr(__('Sign Up')) ?>"
                        type="submit"
                        aria-label="Subscribe">
                    <span><?= $escaper->escapeHtml(__('Sign Up')) ?></span>
                </button>
            </div>
        </form>
    </div>
</li>

define([
    'jquery'
], function($) {
    return function(config, element) {
        $('.subscribe-link', $(element)).click(function(){
            $('.content', $(element)).toggleClass('active');
        });
    };
});

Some CSS work is required

3) DropdownDialog widget

<li data-block="dropdown" class="header-subscribe">
    <div class="subscribe-link action" data-trigger="trigger"></div>
<div class="block content"
     data-mage-init='{
        "dropdownDialog": {
            "appendTo": "[data-block=dropdown]",
            "triggerTarget":"[data-trigger=trigger]",
            "timeout": "2000",
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "autoOpen": false,
            "triggerClass": "",
            "parentClass": "active",
            "buttons": []
        }
     }'>
    <div id="subscribe-content-wrapper">
        <form class="form subscribe"
              novalidate
              action="<?= $escaper->escapeUrl($block->getFormActionUrl()) ?>"
              method="post"
              data-mage-init='{"validation": {"errorClass": "mage-error"}}'
              id="newsletter-validate-detail">
            <div class="field newsletter">
                <div class="control">
                    <label for="newsletter">
                        <input name="email"
                               type="email"
                               id="newsletter-popup"
                               placeholder="<?= $escaper->escapeHtml(__('Your email')) ?>"
                               data-mage-init='{"mage/trim-input":{}}'
                               data-validate="{required:true, 'validate-email':true}"
                        />
                    </label>
                </div>
            </div>
            <div class="actions">
                <button class="action subscribe primary"
                        title="<?= $escaper->escapeHtmlAttr(__('Sign Up')) ?>"
                        type="submit"
                        aria-label="Subscribe">
                    <span><?= $escaper->escapeHtml(__('Sign Up')) ?></span>
                </button>
            </div>
        </form>
    </div>
</div>

</li>