Question

我正在使用Jquery对话框：

<body>
  <div id="comments_dialog">
   Insert a comment
   <form>
     <input type="text" id="search" name="q">
   </form>
  </div>
....
</body>



dialog = $( "#comment_dialog" ).dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      dialogClass: "flora",
      modal: true,
      buttons: {
        "New Comment": addComment,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
    });

我的页面是一个包含大量数据的可滚动页面。

问题是对话框正在页面中间显示，我希望它显示在CURRENT屏幕的中间，因此用户不需要滚动查看它。

我该怎么做？

EDITED

基于这里的一些解决方案，我将CSS设置为这样修复：

.flora.ui-front {
    z-index: 1000 !important;
     position:fixed !important;
}
.flora.ui-dialog {
    z-index: 1001 !important;
     position:fixed !important;
}

但是，我读到该位置修复了与zIndex的冲突。在这种情况下我需要做什么才能将对话框放在当前屏幕的中间位置？

Answer 1

试试这个

dialog = $( "#comment_dialog" ).dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      my: "center",
      at: "center",
      of: window,
      z-index : 9999,
      modal: true,
      buttons: {
        "New Comment": addComment,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
    });

Answer 2

您可能在css中使用position:absolute;，尝试将其更改为position:fixed;

#comment_dialog{
position:fixed;
}

Answer 3

我总是用于我的模态/对话框：

#comment_dialog{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

只要您的div具有大小（不需要是固定大小），它就会在窗口中间显示（水平和垂直居中）

要使用Jquery动态地将这些样式应用于元素，请使用：

$("#comment_dialog").css({
    "position" : "fixed",
    "top": "0",
    "left": "0",
    "right": "0",
    "bottom": "0"

});

Answer 4

修复一个位置，并使用顶部和左侧的calc函数

#comment_dialog {
  position:fixed;
  left: calc(50% - 200px) !important;
  top: calc(50% - 175px) !important;
}

我认为这对你有所帮助

Answer 5

您可以使用以下CSS。

请在＆＃34;全屏＆＃34;中运行示例并调整浏览器窗口大小以查看效果。

说明：

对话框使用position:fixed，这意味着对话框元素相对于浏览器窗口定位。
使用calc设置顶部和左侧位置，这样可以执行计算以确定CSS属性值。
top的值计算如下：实际视口高度的50％减去对角线高度的一半，因此对话框将始终位于视口高度的中心。
左边的值计算如下：实际视口宽度的50％减半对话框宽度，因此对话框将始终位于视口宽度的中心。
结果是对话框始终位于视口的中心。

＆＃13;

#comments_dialog {
  position:fixed;
  top: calc(50vh - 250px/2);
  left: calc(50vw - 350px/2);
  height: 250px;
  width: 350px;
  background-color:yellow;
  z-index: 1000;
}

＆＃13;

<div id="comments_dialog">
  Your content here.
</div>

＆＃13;

使用jQuery可以获得相同的结果，它会为对话框添加内联样式：

$("#comments_dialog").css({
  "position": "fixed",
  "top": "calc(50vh - 250px/2)",
  "left": "calc(50vw - 350px/2)",
  "width": "350px",
  "height": "250px",
  "background-color": "yellow",
  "z-index": "1000";
});

JQuery位于当前屏幕的中间位置

5 个答案: