Magento – How to open popup click on top link

magento2

i want to open popup when customer click on a top link

I am adding top link like this

default.xml

<referenceBlock name="top.links">
        <block class="Company\Module\Block\Top\Link" name="blog-link" >
    </referenceBlock>

Link.php

 public function getHref(){
    if($this->customerSession->isLoggedIn()) {
        $page_url = '#';
        return $this->getUrl($page_url);

    }
}

public function getLabel(){
    if($this->customerSession->isLoggedIn()) {
        return "Classes";

    }
}

How to open popup click on top link?

Best Answer

Try this it works,

In default.xml,

<referenceBlock name="top.links">
    <block class="Magento\Framework\View\Element\Template" name="custom_link" template="Magento_Theme::html/custom_link.phtml"></block>
</referenceBlock>

In custom_link.phtml,

<li class="custom-li">
   <a href="#"><?php echo __('Top links')?></a>
</li>
<div id="popup-modal" style="display:none">
    <h1>text</h1>
</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
             $('.custom-li').click(function(event){
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'popup modal title',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));

            $('#popup-modal').modal('openModal');
        }
    );
</script>
Related Topic