Question

我使用以下代码将对话框定位到窗口的中心。

var dialog = $('#dialogBox');
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var dHeight = $('#dialogBox').height();
var dWidth = $('#dialogBox').width();
$('#dialogBox').css({top:windowHeight/2 - dHeight/2, left:windowWidth/2 - dWidth/2}).show();

它将div定位到窗口的中心。但我想将对话框定位到当前可见区域的中心。因此，即使我向下滚动或向上滚动，对话框也将位于窗口的中心。如何使用jquery？

任何建议都会很有意义!!!

感谢。

Answer 1

你可以像以下那样以死神为中心：

$('#elementID').css({
  position:'absolute',
  top:'50%',
  left:'50%',
  width:'600px',                 // adjust width
  height:'300px',                // adjust height
  zIndex:1000,
  marginTop:'-150px'             // half of height
  marginLeft:'-300px'            // half of width
});

请注意，元素将出现在中心但滚动时不会移动。如果您希望将其显示在中心，则需要将position设置为fixed。但是，这在IE6中不起作用。所以你的决定是：）

您还可以创建快速简单的jQuery插件：

(function($){
    $.fn.centerIt = function(settings){

        var opts = $.extend({}, $.fn.centerIt.defaults, settings);

        return this.each(function(settings){
          var options = $.extend({}, opts, $(this).data());
          var $this = $(this);

          $this.css({
            position:options.position,
            top:'50%',
            left:'50%',
            width:options.width,                 // adjust width
            height:options.height,               // adjust height
            zIndex:1000,
            marginTop:parseInt((options.height / 2), 10) + 'px'  // half of height
            marginLeft:parseInt((options.width / 2), 10) + 'px'  // half of height
          });

        });
    }

    // plugin defaults - added as a property on our plugin function
    $.fn.centerIt.defaults = {
      width: '600px',
      height: '600px',
      position:'absolute'
    }

})(jQuery);

后来就像使用它一样：

$('#elementId').centerIt({width:'400px', height:'200px'});

Answer 2

您想要的是将CSS属性位置更改为： 位置：已修复

不确定它是否适用于IE，它在版本7中没有更旧版本。这将使该对话框保持在相对于窗口的相同位置，即使您滚动。

Answer 3

这是一个非常轻量级的功能，可以将元素置于屏幕中心。我没有包含的唯一内容是z-index，但可以轻松添加。

$.fn.centerToWindow = function()
{
  var obj           = $(this);
  var obj_width     = $(this).outerWidth(true);
  var obj_height    = $(this).outerHeight(true);
  var window_width  = window.innerWidth ? window.innerWidth : $(window).width();
  var window_height = window.innerHeight ? window.innerHeight : $(window).height();

  obj.css({
    "position" : "fixed",
    "top"      : ((window_height / 2) - (obj_height / 2))+"px",
    "left"     : ((window_width / 2) - (obj_width / 2))+"px"
  });
}

Answer 4

不确定是否有这个帮助，但jQuery UI有一个非常好的对话框可能与居中选项。您应该考虑使用它们而不是自己编写。

请参阅：http://jqueryui.com/demos/dialog/

将div或对话框定位到窗口的中心

4 个答案: