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 data-mage-init='{"Vendor_Module/js/header-subscribe": {}}'> <div></div> <div> <form novalidate action="<?= $escaper->escapeUrl($block->getFormActionUrl()) ?>" method="post" data-mage-init='{"validation": {"errorClass": "mage-error"}}' > <div> <div> <label for="newsletter"> <input name="email" type="email" placeholder="<?= $escaper->escapeHtml(__('Your email')) ?>" data-mage-init='{"mage/trim-input":{}}' data-validate="{required:true, 'validate-email':true}" /> </label> </div> </div> <div> <button 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"> <div data-trigger="trigger"></div><div 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> <form novalidate action="<?= $escaper->escapeUrl($block->getFormActionUrl()) ?>" method="post" data-mage-init='{"validation": {"errorClass": "mage-error"}}' > <div> <div> <label for="newsletter"> <input name="email" type="email" placeholder="<?= $escaper->escapeHtml(__('Your email')) ?>" data-mage-init='{"mage/trim-input":{}}' data-validate="{required:true, 'validate-email':true}" /> </label> </div> </div> <div> <button title="<?= $escaper->escapeHtmlAttr(__('Sign Up')) ?>" type="submit" aria-label="Subscribe"> <span><?= $escaper->escapeHtml(__('Sign Up')) ?></span> </button> </div> </form> </div></div></li>Top comments(0)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
