Magento 2 模态小部件答案

【问题标题】：Magento 2 Modal WidgetMagento 2 模态小部件
【发布时间】：2016-04-02 10:07:33
【问题描述】：

我正在尝试使用如下所示的 Magento 2 模态小部件，但它不起作用。它也没有显示任何错误。

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

有人可以在这方面帮助我吗？

【问题讨论】：

标签： jquery bootstrap-modal magento2

【解决方案1】：

试试这个，对我来说很好。在 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>

【讨论】：

你把这段代码放在哪里？另外，我希望这些东西也能发布在 magento.stackexchange.com 上。
如何设置模态弹窗的宽高？

【解决方案2】：

试试这个..

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");
            });

【讨论】：