Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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!

share|improve this question
    
Why are you trying to do this? It seems sort of odd to me. –  Marc D Anderson Apr 11 '13 at 11:10
    
Aesthetics. In my opinion, it looks much cleaner. –  Dom Rocco Apr 11 '13 at 11:15
    
SharePoint has some underlying scripts that control the scroll bars in some pages. I expect that you may spend a lot of time on this for negligible results. –  Marc D Anderson Apr 11 '13 at 15:39
    
Was able to achieve what I wanted by overriding the default SP.UI.ModalDialog.showModalDialog behavior in my Master page. Was quite simple once I realized that could be done. Answer is below. –  Dom Rocco Apr 11 '13 at 16:09
add comment

3 Answers

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.

share|improve this answer
    
This needs to work for every modal dialog on the site, so while I have control over some of them that I'm launching myself, there are still those that are popping up from Title links and Ribbon buttons, etc. So I'm really looking for a universal method of accomplishing this through Javascript. –  Dom Rocco Apr 11 '13 at 11:06
add comment

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>
share|improve this answer
    
Will this modify all dialogs or just those that are launched by calling "OpenDialog" manually? I'm looking for an approach that is comprehensive in that it affects every modal dialog on the site. –  Dom Rocco Apr 11 '13 at 11:08
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

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.