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;
}

jquery灯箱中心

1 个答案: