1

I am trying to use Magento 2 Modal Widget like below but it was not working. It is not showing any error also.

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            $("#ship_now").click(function() { 
                $('#shipNowContent').modal({
                    autoOpen:false,
                    clickableOverlay:true,
                    type:'popup',
                    title:'Hello',
                });
            });
        }
    );
</script>

Could anyone help me in this regard?

11

Try following way.


<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();
                    }
                }]
            };

            $("#ship_now").click(function() {

                $("#shipNowContent").modal(options).modal('openModal');

            });
        }
    );
</script>

2
  • do you know how to set the size of the modal ? Nov 6 '17 at 11:26
  • how to apply validation in that like if i have a two radion buttion if not selected any one error occur after select one of them submit it then it should be work. Dec 18 '17 at 9:35
2

I do this in a similar way to Sohel, the result is the same but the method is slightly different. I initialise the modal in a separate function before actually opening it.

require(['jquery', 'Magento_Ui/js/modal/modal', '!domReady'], function($, modal) {
    var modalTest = {
        // Elements
        button: $('#button'),
        popup: $('#popup'),

        init: function() {
            this.testModal();
            this.bindUIActions();
        },

        testModal: function() {
            this.popup.modal({
                buttons: [{
                    text: 'Ok',
                    class: '',
                    click: function() {
                        this.closeModal();
                    }
                }]
            })
        },

        bindUIActions: function() {
            var self = this;

            this.button.on('click', function(e) {
                e.preventDefault();
                self.modalOpen();
            });
        },

        modalOpen: function() {
            this.popup.modal("openModal");
        }
    }

    modalTest.init();
});
  • Init function just initialises my script
  • testModal initialises the modal
  • bindUIActions handing the events
  • modalOpen opens the modal

Please forgive any poor code or function names it's a quick example I've just created.

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.