sharepoint Working with Modal Dialog Boxes with JavaScript

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Syntax

  • var options = SP.UI.$create_DialogOptions();

  • var modalDialog = SP.UI.ModalDialog.showModalDialog(options);

Parameters

options PropertyDescription
titleA string that contains the title of the dialog
urlA string that contains the URL of the page that appears in the dialog. Either url or html must be specified. url takes precedence over html.
htmlAn HTML element to display within the dialog.
xThe x-offset of the dialog as an integer value.
yThe y-offset of the dialog as an integer value.
widthThe width of the dialog as an integer value. If unspecified and autosize is false the width is set to 768px
heightThe height of the dialog as an integer value. If unspecified and autosize is false the height is set to 576px
allowMaximizeA Boolean value specifying whether the Maximize button should be shown.
showMaximizedA Boolean value specifying whether the dialog opens maximized.
showCloseA Boolean value specifying whether the Close button appears on the dialog.
autoSizeA Boolean value that specifies whether the dialog platform handles dialog sizing automatically.
dialogReturnValueCallbackA function pointer that specifies the return callback function. Function takes two parameters: a dialogResult of type SP.UI.DialogResult Enumeration, and a returnValue object that contains any data returned by the dialog.
argsAn object that contains data that are passed to the dialog.

Remarks

The SP.UI.ModalDialog namespace was introduced to the JavaScript Object Model with SharePoint 2010, and is available in subsequent SharePoint versions 2013, Office365, and 2016.

Additional reference materials:



Got any sharepoint Question?