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();
Please note that
e
was put into the anonymous function. That is the event, and using thepreventDefault()
method should prevent the anchor tag from trying to redirect you to the same page.