元素不会垂直粘贴在屏幕中间 [英] Element does not vertically stick on the middle of the screen

问题描述

我一直在尝试使用JQuery创建一个模式弹出窗口，但不知何故，我被卡在无法正确集中元素的位置（关键点是元素始终集中，无论您的屏幕分辨率如何）。下面写的jsfiddle是我希望元素被垂直集中的代码（因为水平集中可以使用CSS来完成）。

HTML：
测试 p>

CSS：

  .ex_event_frame {
 left：39px; 
 margin-left：auto; 
 margin-right：auto; 
 width：300px; 
 height：300px; 
溢出：auto; 
背景：＃2e3030; 
 color：#ffffff; 
位置：绝对; 
 z-index：101; 
 -moz-border-radius：5px; 
 -webkit-border-radius：5px; 
 border-radius：14px; 
 -moz-box-shadow：0 0 10px rgba（0，0，0，.4）; 
 -webkit-box-shadow：0 0 10px rgba（0，0，0，.4）; 
 -box-shadow：0 0 10px rgba（0，0，0，.4）; 
 border：8px solid＃105f6b; 
 
  

Javascript：

 $（function（）{
 var offset = 0，
 viewportHeight = $（window）.height（），
 $ myDialog = $（' ＃ev-entry'）; 
 $ myDialog.css（'top'，（offset +（viewportHeight / 2）） - （$ myDialog.Height（）/ 2））; 
}）; 
  

这里是我创建的小提琴： http://jsfiddle.net/8v9k9/2/

我正在用尽想法，希望我能尽快听到答案。
在此先感谢！

解决方案

DEMO

  $（ function（）{
 $（window）.resize（function（）{
 var offset = 0，
 viewportHeight = $（window）.height（），
 $ myDialog = $（'＃ev-entry'）; 
 console.log（viewportHeight ++ $ myDialog.height（））
 $ myDialog.css（'top'，（offset +（viewportHeight / 2 ）） - （$ myDialog.height（）/ 2））; 
}）。resize（）; 
}）; 
  

---

• .height（）代替 .Height（）


• 它位于 $（window）.resize（）因此它也调整调整大小以及
  

I've been trying to create a modal popup using JQuery, but somehow I am stuck at the point where I can't properly centralized my element (The keypoint being the element is always centralized regardless of your screen resolution). The below jsfiddle written is the code I want the element to be vertically centralized (as horizontally centralized can be done using CSS.)

HTML: Testing

CSS:

.ex_event_frame {
    left: 39px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: 300px;
    overflow: auto;
    background: #2e3030;
    color: #ffffff;
    position: absolute;
    z-index: 101;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 14px;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    -box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    border: 8px solid #105f6b;
}

Javascript:

$(function () {
    var offset = 0,
        viewportHeight = $(window).height(),
        $myDialog = $('#ev-entry');
    $myDialog.css('top', (offset + (viewportHeight / 2)) - ($myDialog.Height() / 2));
});

Here the fiddle I've created: http://jsfiddle.net/8v9k9/2/

I'm running out of ideas and hopefully I will be able to hear answers as soon as possible. Thanks in advance!

解决方案

DEMO

$(function () {
    $(window).resize(function(){
    var offset = 0,
        viewportHeight = $(window).height(),
        $myDialog = $('#ev-entry');
    console.log(viewportHeight + " "+$myDialog.height() )
    $myDialog.css('top', (offset + (viewportHeight / 2)) - ($myDialog.height() / 2));
    }).resize();
});

---

• It's .height() instead of .Height()
• It's inside $(window).resize() so it adjusts on resize as well

这篇关于元素不会垂直粘贴在屏幕中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！