13

In Magento 2, I want to display a popup (with html code inside) when a user clicks on a link.

2
  • I will give you answer in few min. Commented Jul 29, 2016 at 19:37
  • can you have try with my code, you success or not, have any issue. Commented Jul 30, 2016 at 4:46

2 Answers 2

54

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.

5
  • It works, thank you. However the text "Hi I'm here" appears on the screen while the page is loading, then disappear. Is there a fix for this? Commented Aug 1, 2016 at 17:01
  • let me check from my side and update to you. Commented Aug 2, 2016 at 4:49
  • Try my update code. update to me working or not ? Commented Aug 2, 2016 at 5:23
  • Hae @SHPatel , I have created the form in a modal using above code, but submit button not working while submitting the form, could you please help me. Could you add me to chat box, so that i can post my code. Commented Dec 20, 2016 at 6:35
  • @VenuJoginpally, I also add form in the poup can you tell me how to submit the form
    – Jaisa
    Commented Dec 14, 2018 at 10:38
13

Try Magento2 standard way:

Copy following code inside phtml file.

<div id="modal-form">
    <h1>Hey</h1>
</div>
<a class="action open-modal-form"
   href="#"
   title="Modal">
    <span>Click Me!</span>
</a>
<script type="text/x-magento-init">
    {
        ".open-modal-form": {
            "Vendor_Module/js/modal-form": {}
        }
    }
</script>

Create Vendor/Module/view/frontend/web/js/modal-form.js

define(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function($) {
        "use strict";
        //creating jquery widget
        $.widget('Vendor.modalForm', {
            options: {
                modalForm: '#modal-form',
                modalButton: '.open-modal-form'
            },
            _create: function() {
                this.options.modalOption = this._getModalOptions();
                this._bind();
            },
            _getModalOptions: function() {
                /**
                 * Modal options
                 */
                var options = {
                    type: 'popup',
                    responsive: true,
                    title: 'Sample Title',
                    buttons: [{
                        text: $.mage.__('Continue'),
                        class: '',
                        click: function () {
                            this.closeModal();
                        }
                    }]
                };

                return options;
            },
            _bind: function(){
                var modalOption = this.options.modalOption;
                var modalForm = this.options.modalForm;

                $(document).on('click', this.options.modalButton,  function(){
                    //Initialize modal
                    $(modalForm).modal(modalOption);
                    //open modal
                    $(modalForm).trigger('openModal');
                });
            }
        });

        return $.Vendor.modalForm;
    }
);
6
  • I can't get it to work. I'm using the link to open a size guide popup in product pages. However, in the product pages where this link is enabled, the popup does not work (nothing happens when link is clicked), and the product images dont load. Commented Jul 29, 2016 at 22:22
  • Can you show your code?
    – Sohel Rana
    Commented Jul 30, 2016 at 3:47
  • I used exactly the code you provided but 2 modifications changing "vendor" and "module" with my vendor and module names Commented Aug 1, 2016 at 16:51
  • It's working code. make sure you run development mode or deploy static contend by following command 'php bin/magento setup:static-content:deploy'
    – Sohel Rana
    Commented Aug 1, 2016 at 18:38
  • I think the part you missed in the answer was the requirejs-config.js file declaration. Even though that is implied, adding that file in made your solution work perfect!.
    – circlesix
    Commented Jun 9, 2017 at 18:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.