html Magento 2 #popup #modal

Posted 2021-05-11

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

<div id="popup-mpdal" 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 mpdal title',
                modalClass: 'custom-class',
                closed: function(){
                  // Código que se dispara al cerrar el modal
                },
                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>

Documentación: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_modal.html​​