Detect Modal Dialog Close with JQuery

Question

In my application, I am trying to hide scrollbars in the parent window when a modal dialog is opened...

I've added this to my Master Page:

$(function(){
    if(window.frameElement != null)
    {
        window.top.$("body").css("overflow","hidden");
    }
});

This does successfully hide the scrollbars when the modal dialog is opened, however I have been unable to set them back to "auto" when the dialog is closed.

Naturally, I tried window.unload, but clicking the "X" or the "Close" button do not fire window.unload... What event can I capture to reset body overflow here? I am looking for a universal way to achieve this, without specifically setting click events for buttons, since there are a number of ways to close a dialog.

Thanks!

Answer 1

Here is my solution

$(function(){   
        ExecuteOrDelayUntilScriptLoaded(OverrideModal,"SP.js");
    });

    function OverrideModal(){   
        SP.UI.ModalDialog.showModalDialog_old = SP.UI.ModalDialog.showModalDialog;
        SP.UI.ModalDialog.showModalDialog = function(options){
            options.autoSize = true;
            options.dialogReturnValueCallback = function(dialogResult){
                SP.UI.ModalDialog.RefreshPage(dialogResult);
                $("body").css("overflow","auto");
            };
            $("body").css("overflow","hidden");
            SP.UI.ModalDialog.showModalDialog_old(options);
        };

        $("a[id^=DlgClosed]").click(function(){
            $("body").css("overflow","auto");
        });
    }

Credit to this post for the breakthrough: SP 2010 JavaScript events

Answer 2

Who's calling the modal form? If you are by using SP.UI.ModalDialog.showModalDialog(options)? If so, you just pass a callback function into the parameters. I'm sorry for not being more useful, but look into that SP.UI.ModalDialog namespace...there might be something you can add to the modal forms themselves that would kick off once they're closed.

Answer 3

Have you tired something like that:

<script type="text/javascript">

 function OpenDialog(strPageURL)
 {
   var dialogOptions = SP.UI.$create_DialogOptions();
   dialogOptions.url = strPageURL;// URL of the Page
   dialogOptions.width = 800; // Width of the Dialog
   dialogOptions.height = 1100; // Height of the Dialog
   dialogOptions.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback); // Function to capture dialog closed event
   SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog
   return false;
 }


// Dialog close event capture function
 function CloseCallback(strReturnValue, result, target)
 {
   if (strReturnValue === SP.UI.DialogResult.OK) // Perform action on Ok.
     {
        //reset your body overflow here
     }

   if (strReturnValue === SP.UI.DialogResult.cancel) // Perform action on Cancel.
    {
    noalert( "User clicked Cancel!");
    }


}

</script>