Methods

closeModalDialog

Close the last modal dialog

Example:

// if the user use the cross to close the modal, then `dialogResult` equals to 0 in the callback
// but you can trigger the close of the modal and pass anything you want
$SP().showModalDialog({
  id:"demo",
  title:"Hello World",
  html:'<p>This is an example. Click one of the buttons.</p><p class="ms-alignCenter"><button onclick="$SP().closeModalDialog(\'Continue has been clicked\')">Continue</button></p>',
  callback:function(res) {
    alert(res)
  }
})

// or
var modal = $SP().getModalDialog('demo');
if (modal) $SP().closeModalDialog(modal);

getModalDialog

Retrieve the modal object for a special modalDialog

Example:

var modal = $SP().getModalDialog("MyModal");
$SP().closeModalDialog(modal);

notify

Permits to notify the user using the SP.UI.Notify.addNotification system

Example:

$SP().notify('Processing the data...', {sticky:true}); // the notification will stay on the screen until we remove it
$SP().notify('All done!', {overrideAll:true}); // the "Processing the data..." is removed from the screen and a 5 seconds message says "All done!"

$SP().notify('Please wait 10 seconds...', {
  name:"My 10 seconds notification",
  timeout:10,
  after:function(name,afterDelay) {
    if (afterDelay) alert("OK, you waited during 10 seconds!")
    else alert("Something just removed this notification called '"+name+"'' before the timeout :-(")
  }
})

removeNotify

Permits to remove a notification that is shown on the screen

Example:

$SP().notify('Processing the data...', {sticky:true,name:"Processing data"}); // the notification will stay on the screen until we remove it
$SP().removeNotify("Processing data"); // the notification is removed

$SP().notify('Doing some stuff...');
$SP().notify('Doing some other stuff...');
$SP().removeNotify({all:true}); // all the notifications are removed

$SP().notify('Doing some stuff...');
$SP().notify('Doing some other stuff...');
$SP().notify('This is a sticky message', {sticky:true});
$SP().removeNotify({all:true, includeSticky:false}); // all the notifications are removed except the sticky one

resizeModalDialog

Resize a ModalDialog and recenter it

Example:

// to have a form opened faster we define a minimal width and height, and then once it's loaded we want to have the correct size
$SP().showModalDialog({
  id:"inmodal",
  url:url,
  width:200,
  height:100,
  allowMaximize:true,
  onurlload:function() {
    // resize the frame by checking the size of the loaded page
    var iframe=window.top.document.getElementById('sp_frame_inmodal').nextSibling.querySelector('iframe');
    // define the max size based on the page size
    var size = $SP().getPageSize();
    var maxWidth = 2*size.vw.width/3; // 2/3 of the viewport width
    var maxHeight = 90*size.vw.height/100 // 90% of the viewport height
    // find the size we want based on the modal
    var e=$(iframe.contentDocument.getElementById('onetIDListForm')); // this element gives the size of our form from the modal
    var width=e.outerWidth(true)+100;
    var height=e.outerHeight(true)+iframe.contentDocument.getElementById('ms-designer-ribbon').offsetHeight+100;
    if (width>maxWidth) width=maxWidth;
    if (height>maxHeight) height=maxHeight;
    $SP().resizeModalDialog({id:"inmodal",width:width,height:height});
    // bind the iframe resize, to make sure an external event won't resize it to 200x100
    $(iframe.contentWindow).on('resize', function() {
var $this=$(this);
if ($this.width() === 200 && $this.height() === 100) { // if it gets the original size, then resize to the new ones
  $SP().resizeModalDialog({id:"inmodal",width:width,height:height});
}
    })
  }
});

showModalDialog

Show a modal dialog (based on SP.UI.ModalDialog.showModalDialog) but provides some advanced functions and better management of the modals (for example when you launch several modals)

Example:

// using a callback
$SP().showModalDialog({
  title:"Dialog",
  html:'<h1>Hello World</h1><p><button type="button" onclick="$SP().closeModalDialog(\'here\')">Close</button></p>',
  callback:function(dialogResult, returnValue) {
    alert("Result="+dialogResult); // -> "here"
  }
})

// using as a Promise
$SP().showModalDialog({
  title:"Dialog",
  html:'<h1>Hello World</h1><p><button type="button" onclick="$SP().closeModalDialog(\'here\')">Close</button></p>'
})
.then(function(res) {
  alert("Result="+res.dialogResult); // -> "here"
})

// show a waiting message
$SP().waitModalDialog("Working...");
// --- do some stuff ---
// close the waiting message and open a new modal dialog
$SP().showModalDialog({
  closePrevious:true,
  title:"Success",
  html:'<h1>Done!</h1>'
})
// and use $SP().closeModalDialog() to close it

waitModalDialog

Shortcut for SP.UI.ModalDialog.showWaitScreenWithNoClose()