Magento – Open popup onClick of anchor tag

magento2

I need to open a popup on click of anchor link. I followed this (How to open popup when <a> tag onClick?) answer but the issue is that i have to add script inside .phtml file.

I want to include the script in .js file and then use it. How can i achieve this?

I have already tried by adding inside Vendor/Theme/web/js/custom.js but then the pop up is not getting displayed.

The second solution in the (How to open popup when <a> tag onClick?) link is not working for me.

Can some guide me towards this?

Best Answer

Please add the following to show popup:

<div class="view-popup"  onclick="show_popup()">
    <span>click to view popup</span>
</div>

whatever you want to show in popup,

<div id="popup-wrapper" style="display:none;" >
    <div class="popup-content">
        popup content popup content
    </div>
</div>

Add below popup script:

<script type="text/javascript">
    require([
        "jquery",
        'Magento_Ui/js/modal/confirm',
        'mage/storage',
        "jquery/ui",
        "jquery/validate",
        "mage/translate",
        "mage/mage"

    ], function ($, confirm, storage) {
        window.show_popup = function () {
            var options1 = {
                type: 'popup',
                responsive: true,
                clickableOverlay: false,
                title: 'Size Chart',
                buttons: [{

                }]
            };
            $("#popup-wrapper").show();
            $("#popup-wrapper").modal(options1).modal('openModal');
        }
    });
</script>

You can use Anchor tag instead of span.

clear the cache and check..

Related Solutions

How to Open Popup on Click of Tag in Magento 2

You can open popup when <a> tag onClick using below code

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

<div id="popup-modal" style="display:none;">
    <h1> Hi I'm here.... </h1>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            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'));
            $("#click-me").on('click',function(){ 
                $("#popup-modal").modal("openModal");
            });

        }
    );
</script>

Let me know if you have any issue.

Magento – Magento 2 How to add Product Review Form to Popup

The problem here is that the Block class Form.php (Magento\Review\Block\Form) is not accessible as you have just included the PHTML file without its class.

You need to change below mentioned line of code:

<?php include ($block->getTemplateFile('Magento_Review::form.phtml')) ?>

<?php echo $this->getLayout()->createBlock("Magento\Review\Block\Form")->setTemplate("Magento_Review::form.phtml")->toHtml(); ?>

Best Answer

Related Solutions

How to Open Popup on Click of Tag in Magento 2

Magento – Magento 2 How to add Product Review Form to Popup

Related Topic