jquery ui dialog not showing in center of window after setting position to center

Question

I'm new to jquery ui dialog box. I used dialog box in my MVC website.

I placed my dialog container in layout page inside body tag as follows-

 <div id="dialogBox"></div>

And then on my view page, I have button with id aMyProfile and written jquery code for opening my dialog box.

html code for aMyProfile -

<input type="button" id="aMyProfile" data-url="@Url.Action("UserProfileContainer","User")" value="View Profile"/>

Jquery code for aMyProfile-

$('#aMyProfile').click(function () {
            var currentURL = $(this).attr('data-url');
            $('#dialogBox').load(currentURL, function () {
                $('#dialogBox').dialog("open");
            });
        });

and dialog box initaialization as-

$('#dialogBox').dialog({
        bgiframe: true,
        modal: true,
        autoOpen: false,
        closeOnEscape: false,
        position: 'center',
        resizable: false,
        title: 'Profile',
        width: 750
    });

all above jquery code is inside $(document).ready(function () {});

when i execute my project it is giving me output as -

My dialog box is not coming at center of window. Even though i set position to center.

I don't understand that where I'm going wrong.

Answer 1

You're specifying the position value wrong. It should be like this:

position: { my: "center", at: "center", of: window }

In any case, the default value for position is center aligned, so just remove it.

http://api.jqueryui.com/dialog/#option-position

Answer 2

I've just had the very same issue. Things to check:

Make sure you have /Scripts/jquery.ui.position.js in your application, if not go here

http://jqueryui.com/download/ and download it, you'll find it in

\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\development-bundle\ui\jquery.ui.position.js

in App_Start/BundleConfig.cs change your jqueryui bundle config from this:

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"                     
                    ));

to this:

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/jquery.ui.position.js"
                    ));

That should sort it.