SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want to hook into certain events on a SharePoint 2010 site, specifically the modal dialog open and close events.

Does SharePoint 2010 trigger any events for these kinds of actions? If so, how do I register an event listener?

Working with out of the box installation of SharePoint and only have access to client side code.

share|improve this question
up vote 8 down vote accepted

To intercept all modals if you don't have control on their triggers, you might want to do a "catch all" proxy pattern:

SP.UI.ModalDialog.showModalDialog_old = SP.UI.ModalDialog.showModalDialog;
SP.UI.ModalDialog.showModalDialog = function(options) { 
   console.log(0); //do stuff

You will want to do that after sp.ui.js loads, there are some ways of doing that but if you have jQuery a simply $(function() { }); will do.

Now to capture the close event it isn't as simple since the same pattern above doesn't seem to work on the SP.UI.ModalDialog.commonModalDialogClose but you can simply attach to it with a jQuery selector:

$("a[id^=DlgClose]").click(function() { 
  // modal X button clicked. 
share|improve this answer
+1 But I think you missed the bit where you set SP.UI.ModalDialog.showModalDialog_old – Stuart Pegg Jan 29 '13 at 9:35
Thanks, this will suffice. – Fergal Jan 29 '13 at 11:05
Thanks @StuartPegg, just fixed it. And thanks @Fergal! – Francisco Aquino Jan 30 '13 at 15:55
I get Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined(…) – lll Mar 22 at 23:24

I don't know if this is what you are after, but I post anyhow.

If you make a custom call to the modal dialog, you can execute your own code before you show the dialog.

//Dialog Opening
function OpenDialog() {
    var options = SP.UI.$create_DialogOptions();
    options.url = '/Pages/myPage.aspx';
    options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);

The callback function can be like this:

function CloseCallback(result, target) {
    if (result == SP.UI.DialogResult.OK) {
        // Your OK code
    if (result == SP.UI.DialogResult.cancel) {
        // Your cancel code
share|improve this answer
Thanks, but I won't be making custom calls, I need to hook onto every modal open and close whether custom or built in. – Fergal Jan 29 '13 at 11:05

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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