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>