Question

我在JavaScript对话框的定位方面遇到了麻烦，当用户进入页面时，我的对话框会自动加载，并且它应位于页面中间。问题是它会在我缓存刷新页面时居中，但是正常刷新它不会。在正常加载时，顶部样式属性设置为432px 在高速缓存刷新时，顶部样式属性设置为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>

我已尝试过多次在此处找到的内容，例如添加

top :(（window.innerHeight / 2） - （$（'＃dialog'）。height（）/ 2））+'px'， left：（（window.innerWidth / 2） - （$（'＃dialog'）。width（）/ 2））+'px'

或者添加一个带有x和y坐标的位置数组，但它们没有任何影响。

此对话框没有附加css代码。

有没有一种方法可以让代码在清除缓存时自动加载页面，因为我相信这可能会解决问题。

感谢任何帮助，谢谢

Answer 1

这是你想要的那个？

$("#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>

职位

类型：对象默认值：{my：“center”，at：“center”，of：window}

指定打开时对话框的显示位置。该对话框将处理冲突，以便尽可能多地显示对话框。

属性默认为窗口，但您可以指定另一个要定位的元素。您可以参考jQuery UI Position实用程序以获取有关可用属性的更多详细信息。代码示例：

使用指定的位置选项初始化对话框：

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

对于mor信息，请使用链接：http://api.jqueryui.com/dialog/#option-position

缓存

1 个答案: