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()