jQuery的燈箱中心

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