Take the 2-minute tour ×

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

    // needed something like this
    SP.UI.ModalDialog.showInSpecificDiv(options, 'divId');
share|improve this question

3 Answers 3

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'


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

options.dialogReturnValueCallback = Function.createDelegate(null,closeDialogCallback);

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

share|improve this answer
Thank you. But I don't need to write html to pop-up window, I need to render EditForm to div on page and set callback function (like SP.UI.ModalDialog.showModalDialog but show EditForm in specific div, not in pop-up). –  user1167761 Apr 13 '13 at 14:51

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

var ShowDialogIn=function(options,diagContainer){
    options.allowMaximize = false;


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

share|improve this answer

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.

share|improve this answer
We use JS to make UI for SharePoint App. There is a button "EditButton" in the UI. On "EditButton" click I want to show standart sharepoint EditForm in specific place on the page (not in popup). I also need to have JS-events when users Update or Close EditForm. –  user1167761 Apr 15 '13 at 13:37

Your Answer


