Show HTML in SharePoint Popup Dialog

Question

How I can show SharePoint Modal Popup Dialog with HTML option in SharePoint 2019? I am trying to use SP.UI.ModalDialog.showModalDialog to open link in SharePoint Popup Dialog but I need to show DIV HTML instead? How I can do that?

var options = {
url: pageUrl,
title: 'Modal Title',
allowMaximize: false,
showClose: true,
width: 726,
height: 372
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}

Answer 1

How to show SharePoint Modal Popup Dialog With HTML option?

You can show HTML option instead of URL option in SharePoint Modal Popup Dialog as the following:

<script>

    function openDialog() {
        var divElement = document.createElement('div');
            divElement.innerHTML = "enter your content here";

        var options = {
            html: divElement,
            title: "Yout title",
            allowMaximize: false,
            showClose: true,
            width: 300,
            height: 100
        };
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
    }
</script>

<a href="#" onclick="openDialog();">Click Here</a>

For more details, Please check Open link in Modal Dialog SharePoint 2013 and 2016