Analog of SP.UI.ModalDialog.showModalDialog function, but render to specific div

Question

How to make the analog of SP.UI.ModalDialog.showModalDialog function, but render to specific div?

I need to render EditForm to div on page and set callback function. Something like SP.UI.ModalDialog.showModalDialog but show EditForm in specific div, not in pop-up.

var ShowForm = function () {
    var options = {};
    options.url = 'mywebUrl/Lists/myList/EditForm.aspx?ID=1';
    options.dialogReturnValueCallback =
                function (dialogResult, returnValue) {
                    console.log({ dialogResult: dialogResult, returnValue: returnValue });
                }

    // render form to popup div
    SP.UI.ModalDialog.showModalDialog(options);


    // needed something like this
    SP.UI.ModalDialog.showInSpecificDiv(options, 'divId');
}

Answer 1

This example is for SharePoint 2010 but i think it can help you.

In the SP.UI.ModalDialog class you have HTML property for rendering html content. but remember, for the HTML property to work you must pass a DOM element or you'll get an error:'Object doesn't support this property or method'

Example:

//open dialog
function openDialog() {
 //create html   
var divElement = document.createElement('div')
var textNode = document.createTextNode('Hello World');
divElement.appendChild(textNode);
var options = SP.UI.$create_DialogOptions();
options.html = divElement; 
options.title = 'Test';
options.width = 200;   
options.height = 100;

options.dialogReturnValueCallback = Function.createDelegate(null,closeDialogCallback);
SP.UI.ModalDialog.showModalDialog(options);}

For more info about this example check out my blog post: Creating simple pop up window and render html using the Sharepoint 2010 Dialog Framework

Answer 2

Try this function, ShowDialogIn(option,'divID')

var ShowDialogIn=function(options,diagContainer){
    options.allowMaximize = false;
    SP.UI.ModalDialog.showModalDialog(options);

    $('.ms-dlgOverlay').hide();
    $('body>iframe').hide();
    $('body>div.ms-dlgContent').css('position','relative').appendTo($('#'+diagContainer));
}

*NOTE: without fully test, know bug: drag the 'dialog' title bar will insert a big blank element before the dialog.... *

Answer 3

You can do this several ways, but I am trying to understand the business case or what you are exactly trying to do. You can modify a list form to show what you need and where you need it, but typically the SP.UI Notifications are written through javascript code. For example you could create your own form depending on what fields you need using the client object model and then use the notification code in conjunction with that. Or you could do it with a custom rendering template and server object model code. It just really depends on what tools you have and what the end goal is. Maybe add a bit more of what it needs to look like and what tools you are using.