jQuery对话框始终居中 [英] jQuery dialog always centered

问题描述

如何实现具有自动宽度&的jQuery模式对话框?高度始终位于浏览器的中心.同样在调整浏览器窗口的大小之后.

How can I implement, that a jQuery modal dialog with auto width & height is always centered in the browser. Also after resizing the window of the browser.

以下代码不起作用.我认为问题是自动宽度和高度.

The following code doesn't work. I think the problem is the auto width & height.

jQuery-代码

$("<div class='popupDialog'>Loading...</div>").dialog({
  autoOpen: true,
  closeOnEscape: true,
  height: 'auto',
  modal: true,
  title: 'About Ricky',
  width: 'auto'
}).bind('dialogclose', function() {
  jdialog.dialog('destroy');
}).load(url, function() {
  $(this).dialog("option", "position", ['center', 'center'] );
});

$(window).resize(function() {
  $(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});

谢谢！

推荐答案

从根本上说，我认为position: ["center", "center"]并不是最佳解决方案，因为它为基于以下内容的对话框分配了显式的top:和left: css属性创建时视口的大小.

Acutally, I think the position: ["center", "center"] not be the best solution, as it assigns an explict top: and left: css properties to the dialog based on the size of the viewport at creation.

当尝试在屏幕上垂直放置对话框中心时，我遇到了同样的问题.这是我的解决方案:

I came across this same issue when trying to have a dialog center on screen vertically. Here is my solution:

在我的.dialog()函数的options部分中，我传递了position:[null, 32]. null设置元素样式的left:值，而32只是用于将对话框固定在窗口顶部.另外，请务必设置一个明确的宽度.

In the options part of my .dialog() function, I pass position:[null, 32]. The null sets the left: value the element's style, and the 32 is just for keeping the dialog box pegged to the top of the window. Also be sure to set an explicit width.

我还使用dialogClass选项来分配一个自定义类，该类只是一个margin:0 auto; css属性:

I also use the dialogClass option to assign a custom class, which is simply a margin:0 auto; css property:

.myClass{
    margin:0 auto;
}

我的对话框如下:

  $('div#popup').dialog({
    autoOpen: false,
    height: 710,
    modal: true,
    position: [null, 32],
    dialogClass: "myClass",
    resizable: false,
    show: 'fade',
    width: 1080
  });

希望这对某人有帮助.

这篇关于jQuery对话框始终居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！