I'm using the sharepoint js function OpenPopUpPage which is working just great, requirements changed, and now the customer want the pop-up page to be closed if user clicked outside the pop-up page's window rather than click on the close button..
any possibleties to achieve this using OpenPopUpPage? or any other alternative popups?


1 Answer 1


The gray surface behind you popup is a div with the class 'ms-dlgOverlay', so after calling OpenPopUpPage you can set the onclick event to close the dialog.

Here is a javascript function which wraps OpenPopUpPage and does that:

function MyOpenPopUpPage(url, callback, width, height){
  SP.UI.ModalDialog.OpenPopUpPage(url, callback, width, height);

  // Find ms-dlgOverlay
  var overlay = null;
  var $v_1 = document.getElementsByTagName('div');
  for (var $v_2 = 0; $v_2 < $v_1.length; $v_2++) {
    var $v_3 = $v_1[$v_2];
    if ($v_3.className.indexOf('ms-dlgOverlay') !== -1){
      overlay = $v_3;
  // Set click to close
  if (overlay) {

  return false;
  • Works great, just need to remove the return false; :) Commented Mar 19, 2012 at 6:15
  • Can we let the pop-up takes its Width/Height automatically from its content (image, for example)? Commented Mar 19, 2012 at 6:47
  • The function behaves like the original OpenPopUpPage, so if you don't specify width and height it'll try to size automatically. Commented Mar 19, 2012 at 7:07
  • The test shows that The OpenPopUpPage doesn't automatically re-sized according to its content! I don't know why Commented Mar 19, 2012 at 11:33
  • Auto resizing will only work if the page being shown: Includes SP.UI.Dialog.js, knows how big it is and is in the same domain so it can send the infomation to the main window without running into XSS problems Commented Mar 19, 2012 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.