Làm cách nào để mở cửa sổ bật lên khi <a> thẻ onClick?

Trong Magento 2, tôi muốn hiển thị cửa sổ bật lên (có mã html bên trong) khi người dùng nhấp vào liên kết.

Bạn có thể mở cửa sổ bật lên khi <a>thẻ onClick sử dụng mã bên dưới

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

<div id="popup-modal" style="display:none;">
    <h1> Hi I'm here.... </h1>
</div>

<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();
                    }
                }]
            };

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

        }
    );
</script>

Hãy cho tôi biết nếu bạn có bất kỳ vấn đề.

Hãy thử cách tiêu chuẩn Magento2:

Sao chép mã sau trong tập tin phtml .

<div id="modal-form">
    <h1>Hey</h1>
</div>
<a class="action open-modal-form"
   href="#"
   title="Modal">
    <span>Click Me!</span>
</a>
<script type="text/x-magento-init">
    {
        ".open-modal-form": {
            "Vendor_Module/js/modal-form": {}
        }
    }
</script>

Tạo Nhà cung cấp / Mô-đun / chế độ xem / frontend / web / js / modal-form.js

define(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function($) {
        "use strict";
        //creating jquery widget
        $.widget('Vendor.modalForm', {
            options: {
                modalForm: '#modal-form',
                modalButton: '.open-modal-form'
            },
            _create: function() {
                this.options.modalOption = this._getModalOptions();
                this._bind();
            },
            _getModalOptions: function() {
                /**
                 * Modal options
                 */
                var options = {
                    type: 'popup',
                    responsive: true,
                    title: 'Sample Title',
                    buttons: [{
                        text: $.mage.__('Continue'),
                        class: '',
                        click: function () {
                            this.closeModal();
                        }
                    }]
                };

                return options;
            },
            _bind: function(){
                var modalOption = this.options.modalOption;
                var modalForm = this.options.modalForm;

                $(document).on('click', this.options.modalButton,  function(){
                    //Initialize modal
                    $(modalForm).modal(modalOption);
                    //open modal
                    $(modalForm).trigger('openModal');
                });
            }
        });

        return $.Vendor.modalForm;
    }
);