I need a PopUpPage that disappear when clicking out side it's window

Question

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?

Thanks.

score 5 · Accepted Answer · answered Mar 18 '12 at 19:45

5

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;
      break;
    }
  }
  // Set click to close
  if (overlay) {
    overlay.setAttribute('onclick','SP.UI.ModalDialog.commonModalDialogClose(0);');
  }

  return false;
}

answered Mar 18 '12 at 19:45

Per Jakobsen

32,409
1
33
62

Works great, just need to remove the return false; :) – Rami Alshareef Mar 19 '12 at 06:15
Can we let the pop-up takes its Width/Height automatically from its content (image, for example)? – Rami Alshareef Mar 19 '12 at 06:47
The function behaves like the original OpenPopUpPage, so if you don't specify width and height it'll try to size automatically. – Per Jakobsen Mar 19 '12 at 07:07
The test shows that The OpenPopUpPage doesn't automatically re-sized according to its content! I don't know why – Rami Alshareef Mar 19 '12 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 – Per Jakobsen Mar 19 '12 at 11:53

I need a PopUpPage that disappear when clicking out side it's window

1 Answers1