Put custom HTML string OR custom .aspx page url in SP modal dialog

Question

I want to put either custom HTML string OR custom .aspx page url in SP modal dialog

    function OpenCustomForm() {
        var options = SP.UI.$create_DialogOptions();
        options.url = "/sites/link/to/customPage.aspx";
        options.dialogReturnValueCallback = function(result) { 
            if (result === SP.UI.DialogResult.OK) {
                SP.UI.ModalDialog.RefreshPage(result);
            }
        };
        SP.UI.ModalDialog.showModalDialog(options);
    }

What are best practice between them?

1. Custom HTML - I know it does not accept HTML string. should be provide DOM elements
2. Custom .aspx page - when i am trying to open custom page in modal dialog, error occurs with message "Sorry something went wrong"

Answer 1

You should use 2nd option, display custom page.

Below are 2 options to open page in modal.

//Using the DialogOptions class.
var options = SP.UI.$create_DialogOptions();

options.title = "My Dialog Title";
options.width = 400;
options.height = 600;
options.url = "/_layouts/DialogPage.aspx";

SP.UI.ModalDialog.showModalDialog(options);

//Using a generic object.
var options = {
    title: "My Dialog Title",
    width: 400,
    height: 600,
    url: "/_layouts/DialogPage.aspx" };

SP.UI.ModalDialog.showModalDialog(options);

Below is what you can try to trouble shoot

1. Is your custom page working in separate windows. if you are seeing error in separate page, fix the error targeting that page.

2. Where exactly you are getting this error ? After model popup opens or before that ? Also try to show some default page on this modal dialog and see if is there any issue with options you are providing ?

Answer 2

You can open your custom html in a SP Dialog like this:

var html = "<div id='myHtml'>your html goes here</div>";
$('body').append(html);

SP.UI.ModalDialog.showModalDialog({
    html: document.getElementById('myHtml'),
    title: "YourDialogTitle",
    allowMaximize: false,
    showClose: true,
    autoSize: true
});