Magento 2 Modal Widget

Question

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?

Answer 1

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>

Answer 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.