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?

Solution

Try this, Works fine 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>

Comments

[camdixon]

Where do you put this code? Also, I wish this stuff was posted on magento.stackexchange.com as well.

[abc]

How to set a width and a height for Modal popup?