ModalPopup SetFocus() (with MasterPage)

Today I had to create a login page. It’s not my first and the way things are going, certainly not the last. Only this time it was a complete separate administration site where nothing happened until the user logged-in. So, „please login” was the first message a user was seeing there. Based on my previous „experience” with DOCTYPEs and heights I knew I had poor chances to vertically center the „login div”, so I opted for AJAX’s modal popup extender with RepositionMode set to "RepositionOnWindowResize". So far, so good. I called modal popup extender’s „Show()” method on PageLoad() and everything worked as planned. Well, everything except focus. :D

Obviously, you can’t position the focus on a hidden control, so any attempt to do it from code-behind at loading time is doomed to failure. The only way to do it is JavaScript and because the ModalPopupExtender does not contain a property to do it by itself when the targeted panel is displayed, you have to do it YOURSELF.

On a quick search I found odd solutions like timers, intervals etc., all set to trigger the focus „a few miliseconds after” popup’s display. Ugly as hell. Here is my solution to this:  (if you find it useful please leave a „cheers” :D)

<script type="text/javascript" language="javascript" >

    'AJAX framework calls this when the page is loaded, if it exists, of course.
    function pageLoad() {
            mpeLoginBehaviourID = $find('mpeLoginBehaviourID') 'this is ModalPopupBehaviour’s BehaviorID="mpeLoginBehaviourID"
            mpeLoginBehaviourID.add_shown(SetFocus);
            mpeLoginBehaviourID.show();
        }

    function SetFocus() {
            $get('<%= txtUser.ClientID %>').focus(); 'this is the asp.TextBox I’m targetng.
        }
</script>

That’s it.

Oh, one more thing. If you have a MasterPage and the popup is somewhere else, you can still do it using the same mechanism AJAX uses to call „pageLoad()”:

1.  Define the pageLoad on MasterPage (it can be useful later ;))
2.  Call a „contentPageLoad” checking it’s exitance first:

<script type="text/javascript" language="javascript" >

    function pageLoad() {
        // Master pageLoad() code goes here.

        // If function contentPageLoad exists, execute it.
        if(typeof contentPageLoad == 'function') contentPageLoad();
    }
</script>

Of course, on the „login” page you will define the „contentPageLoad” function registering the „SetFocus” method and showing the modal popup.

Enjoy.