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> 
Top comments (0)