8

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

  • I will give you answer in few min. – Suresh Chikani Jul 29 '16 at 19:37
  • can you have try with my code, you success or not, have any issue. – Suresh Chikani Jul 30 '16 at 4:46
34

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.

  • 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? – Luis Garcia Aug 1 '16 at 17:01
  • let me check from my side and update to you. – Suresh Chikani Aug 2 '16 at 4:49
  • Try my update code. update to me working or not ? – Suresh Chikani Aug 2 '16 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. – Venu Joginpally Dec 20 '16 at 6:35
  • @VenuJoginpally, I also add form in the poup can you tell me how to submit the form – Jaisa Dec 14 '18 at 10:38
8

Try Magento2 standard way:

Copy following code inside phtml file.

<div id="modal-form">
    <h1>Hey&lt;/h1>
</div>
<a class="action open-modal-form"
   href="#"
   title="Modal">
    <span>Click Me!&lt;/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

<script type="text/x-magento-init"">
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;
    }
);
</script>
  • 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. – Luis Garcia Jul 29 '16 at 22:22
  • Can you show your code? – Sohel Rana Jul 30 '16 at 3:47
  • I used exactly the code you provided but 2 modifications changing "vendor" and "module" with my vendor and module names – Luis Garcia Aug 1 '16 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 Aug 1 '16 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 Jun 9 '17 at 18:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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