jQuery Popup Modal Closes Immediately – How to Fix

magento2

I have a magento2.3 based site trying to use the jquery modal function in Magento when a a href link is clicked. I have the model opening on click. However what is happening is I click the a href link the pop up loads for a second but the page reloads when I click the link so the pop up then goes away cause the page is reloaded.

I am not sure what to add to the js so that it does not treat the a href link as a usual link? Here is my code

// Top bar promo popup
require(['jquery','Magento_Ui/js/modal/modal'],function($,modal) 
{
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            title: 'Todays Promo',
            buttons: [{
                text: $.mage.__('Continue'),
                class: '',
                click: function () {
                    this.closeModal();
                }
            }]
        };

        var popup = modal(options, $('#popup-modal'));
        $(".sheaffer-overhead").on('click',function(){ 
            $("#popup-modal").modal("openModal");
        });
  });

Html code

<div class="sheaffer-overhead"><a href="">CLICK ME</a></div>

Best Answer

If I were you, I'd avoid using an anchor (<a>) tag entirely and instead just make it a <span>, styling it to look like a link via CSS. That way, you can avoid this issue.

As for your example, you will want to add the following to your JS: e.preventDefault();

$(".sheaffer-overhead").on('click',function(e){
    e.preventDefault();
    $("#popup-modal").modal("openModal");
});

Please note that e was put into the anonymous function. That is the event, and using the preventDefault() method should prevent the anchor tag from trying to redirect you to the same page.

Related Topic