Javascript 可行区域的中心模式

我正在构建自己的自定义模态/对话框，并希望将其置于可视区域的中心。例如，如果网页非常大，查看器向下滚动很远，然后单击打开“我的自定义模式/对话框”，它将打开，但用户必须滚动到顶部才能看到它。我希望模态在可视区域的中心打开。有人可以告诉我如何计算可视区域的中心，这样当显示模态时，它可以绝对定位在那里

---

Twitter bootstrap通过其模式实现了这一点，在该模式下，它会向下滑动到可查看区域的中心，我想对我的自定义小部件执行相同的操作，

例如，我使用的是如下内容：

$(function() {
  /**
   * Moves an element to the center of the current screen (considering scrolling)
   */
  $.fn.center = function (position) {
    for (var i = 0; i < this.size(); i++) {
      var t = $(this[i]);
      t.css("position", position || "absolute");
      var extra_top = position != "fixed" ? $(window).scrollTop() : 0;
      var extra_left = position != "fixed" ? $(window).scrollLeft() : 0;
      t.css("top", Math.max(0, ($(window).height() - t.outerHeight()) / 2 + extra_top) + "px");
      t.css("left", Math.max(0, ($(window).width() - t.outerWidth()) / 2 + extra_left) + "px");
    }
    return this;
  }

...
});

$（函数（）{
/**
*将元素移动到当前屏幕的中心（考虑滚动）
*/
$.fn.center=功能（位置）{
对于（var i=0；i

---

用法：

$（“#模态”）.center（）
最简单的方法是查看模式窗口的高度和宽度。
然后，将位置设置为固定

top: 50%;
left: 50%;
margin-left: - "INSERT WIDTH DIVIDED BY 2"
margin-top: - "INSERT HEIGHT DIVIDED BY 2"

这将始终使模式在页面上居中

.page{
    position: absolute;
    height:1000px;
    width:1000px;
    background-color: blue;
}

.modal{
     width: 300px;
     height:300px;
    top:50%;
    left:50%;
    margin-left:-150px;
    margin-top:-150px;
    position: fixed;
    background-color:red;
}

见我的附件JSFIDLE。
是的，固定位置不是一个选项，因为有时模式会比屏幕尺寸大，用户将永远无法看到最初不可见的部分。