Magento 2 Modal Widget

Question

I am trying to use Magento 2 Modal Widget as shown below, but it does not work. It also does not show any errors.

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

Can anyone help me in this regard?

Answer 1

Try it, good for me. Implemented in Magento 2.0.

<button type="button" id="openModel" class="btn btn-primary">Open Model</button>
<div id="myModel">
    <h1>Title</h1>
    <div>Content.....</div>
</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function($,modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'popup mpdal title',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };
            var popup = modal(options, $('#myModel'));
            $("#openModel").on("click",function(){
                $('#myModel').modal('openModal');
            });
        }
    );
</script>

Answer 2

Try it.

var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Newsletter',
                buttons: [{
                        text: jQuery.mage.__('Continue'),
                        class: '',
                        click: function () {
                            this.closeModal();
                        }
                    }]
            };
            jQuery("#subscriber_button").on('click', function () {
                modal(options, jQuery('#popup-modal'));
                jQuery("#popup-content").modal("openModal");
            });