0

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>

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.