javascript - jQuery Lightbox Center

Question

我对灯箱居中位置有一个疑问。

在此DEMO

您可以点击右上角的按钮，然后看到灯箱。

我可以将此CSS设置为灯箱位置：

.elight{
   position:fixed;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      background:#fff;
      opacity: .0;
      filter:alpha(opacity=0);
      z-index:300;
      display:none;
}
.eall_in_one{
  position:absolute;
      top:10%;
      left:28%;
      width:600px;
      height:auto;
      padding-bottom:20px;
      background:#fff;
      z-index:500;
      padding:0; 
     -webkit-box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.53);
     -moz-box-shadow:    0px 0px 25px 0px rgba(50, 50, 50, 0.53);
      box-shadow:         0px 0px 25px 0px rgba(50, 50, 50, 0.53);
  display:none;
}

但这没有用。

问题是位置。例如，如果在单击该按钮时单击下面的按钮，则页面将自动向上移动。

我希望我能表达自己。

Answer 1

尝试这个

.eall_in_one{
      position:absolute;
      top:10%;
      left:50%;
      width:600px;
      height:auto;
      padding-bottom:20px;
      background:#fff;
      z-index:500;
      margin-left: -300px;
      padding:0; 
     -webkit-box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.53);
     -moz-box-shadow:    0px 0px 25px 0px rgba(50, 50, 50, 0.53);
      box-shadow:         0px 0px 25px 0px rgba(50, 50, 50, 0.53);
      display:none;
}