Magento2: How to trigger a popup when click on My Account header link?

Question

I want to show a popup when click on My Account header link. As I could not find any phtml file for My Account. Please anybody help me on this.

Any help would be appreciated.

Answer 1

You will have to override /magentorootfolder/vendor/magento/module-customer/view frontend/layout/default.xml either in your theme or extension & update below code

  <block class="Magento\Customer\Block\Account\Link" name="my-account-link">
      <arguments>
        <argument name="label" xsi:type="string" translate="true">My Account</argument>
        <argument name="class" xsi:type="string">my-account-link</argument>
        <argument name="sortOrder" xsi:type="number">110</argument>
      </arguments>
    </block>

Here I have added css class my-account-link on My Account Link (on which you have to trigger JS code for modal popup). For that add below JS Code

require(['jquery', 'Magento_Ui/js/modal/modal'], function($,modal){
 var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: 'mymodal1',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('.modal-popup'));
            $(".my-account-link").on('click',function(event){
                event.preventDefault();
             $('.modal-popup'). modal(options, $('.modal-popup')).modal('openModal');

            });


     });

Content that will be displayed in popup

<div class="modal-popup" >
    Demo of Modal POpup
</div>

Answer 2

Please Try this Tutorials

• Add Magento 2 Modal Widget Module [Step by Step]
• How To In Magento 2 – How To Add Modal PopUp?

OR

Add this line for Whereyou want Account Click

  <a href="#" id="click-me">Click Me</a>

Popup Contents

<div id="popup-mpdal" >
    Place Your Contents Here
</div>

Add Script

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-mpdal'));
            $("#click-me").on('click',function(){
                $("#popup-mpdal").modal("openModal");
            });

        }
    );
</script>