缓存的JavaScript对话框位置问题

Question

I'm having trouble when it comes to the positioning of my JavaScript dialog box, my dialog box loads automatically when the user enters the page and it should centre in the middle of the page. The problem is it will centre when i cache refresh the page however with a normal refresh it doesn't. On a normal load the top style property is set to 432px On a Cache refresh the top style property is set to 299px

        $("#dialog").dialog({
            autoOpen: true,
            modal: true,
            show: "blind",
            hide: "blind",
            width: 550,
            resizable: false,
            draggable: false,
            closeOnEscape: false,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close", ui.dialog | ui).hide().focus();
            }
        });

<div id="dialog" title="Modules">
    <br />
    <a href="@Url.Action("PopFit", "Dashboard", new { id = 1 })">
        <img src="../Content/Images/Graphics/popfit white.png" autofocus="false" alt="PopFit" style="width:100%"/>
    </a>
    <br />
    <br />
    <a href="@Url.Action("PopAudit", "Dashboard", new { id = 2 })">
        <img src="../Content/Images/Graphics/popaudit white.png" alt="PopAudit" style="width:100%"/>
    </a>
</div>

I've tried multiple things I've found on here such as adding

top: ((window.innerHeight/2) - ($('#dialog').height()/2))+'px', left:((window.innerWidth/2) - ($('#dialog').width()/2))+'px'

Or adding a position array with x and y coordinates but they haven't had any affect.

There is no css code attached to this dialog box.

Is there a way that i code automatically have the page load while clearing the cache as I believe this might fix the problem.

Any help is appreciated, Thanks

Answer 1

It's this wat you want?

 $("#dialog").dialog({ autoOpen: true, modal: true, show: "blind", hide: "blind", width: 550, resizable: false, draggable: false, closeOnEscape: false, open: function (event, ui) { $(".ui-dialog-titlebar-close", ui.dialog | ui).hide().focus(); } }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="dialog" title="Modules"> <br /> <a href="@Url.Action("PopFit", "Dashboard", new { id = 1 })"> <img src="../Content/Images/Graphics/popfit white.png" autofocus="false" alt="PopFit" style="width:100%"/> </a> <br /> <br /> <a href="@Url.Action("PopAudit", "Dashboard", new { id = 2 })"> <img src="../Content/Images/Graphics/popaudit white.png" alt="PopAudit" style="width:100%"/> </a> </div> 

Position

Type: Object Default: { my: "center", at: "center", of: window }

Specifies where the dialog should be displayed when opened. The dialog will handle collisions such that as much of the dialog is visible as possible.

The of property defaults to the window, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the available properties. Code examples:

Initialize the dialog with the position option specified:

$( ".selector" ).dialog({
  position: { my: "left top", at: "left bottom", of: button }
});

For mor information use the link: http://api.jqueryui.com/dialog/#option-position