Question

我需要在Magento2的模态弹出窗口中打开.phtml文件（gallery.phtml）中的数据。这是用于包含模态脚本的代码：

<div>
    <a href="#" id="click-me">Click Me</a>
</div>


<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                content: 'gallery.phtml',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-mpdal'));
            $("#click-me").on('click',function(){
                $("#popup-mpdal").modal("openModal");
            });

        }
    );
</script>

gallery.phtml文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="popup-mpdal">
    <h1> Hi I'm here.... </h1>
</div>
</body>
</html>

但弹出窗口不会到来。

Answer 1

我得到了答案：

<div>
    <a href="#" id="click-me">Click Me</a>
</div>

<div id="popup-mpdal" >
    <?php include ($block->getTemplateFile('Vendor_Module::gallery.phtml')) ?>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-mpdal'));
            $("#click-me").on('click',function(){
                $("#popup-mpdal").modal("openModal");
            });

        }
    );
</script>

Answer 2

我在html中使用了

    <button type="button" class="action" data-trigger="trigger">
    <span data-bind="i18n: 'Click Here'"></span>
</button>
<div data-bind="mageInit: {
        'Magento_Ui/js/modal/modal':{
            'type': 'popup',
            'title': 'Popup title',
            'trigger': '[data-trigger=trigger]',
            'responsive': true,
            'buttons': [{
                text: 'Submit',
                class: 'action'
            }]
        }}">
    <div class="content">
        Popup Content
    </div>
</div>

Magento2：如何在弹出窗口中显示.phtml文件

2 个答案: