jquery popup modal onclick closes right after opening

Question

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>

Answer 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.