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.

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

  return false;
}