如何在屏幕上顯示彈出中心

Question

我有一個產品列表，當我單擊每個產品時，會顯示一個彈出窗口，但此彈出窗口顯示在頁面頂部，並且不透明性不在所有屏幕中。

我的彈出窗口：

  $('.image-sample').click(function(data) { var image = $(this).attr('data-image'); $.get("/sample-image/"+ image, function(data) { $(".popup").html(''); $(".popup").append(data); $('.opacity').show(); $('.popup').show(); closeNews(); }); }); 

 .popup { position: absolute; width: 100%; height: 100%; display: none; z-index: 1000 !important; overflow: hidden; } .opacity { position: absolute; width: 100%; height: 100%; background-color: grey; opacity: 0.5; z-index: 998; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="popup"></div> <div class="opacity"></div> 

它允許在彈出窗口顯示時滾動，而不應該滾動。

我想要的是在屏幕上居中彈出窗口，並在所有屏幕上都具有不透明度。

我怎么了

謝謝

Answer 1

1. 不透明度動畫問題：如果您使用display：none在不具有透明度的css動畫中不起作用，所以我建議在jquery中使用，而不是$（'。popup'）。show（）; 但是fadeIn和fadeOut-$（'。opacity'）。fadeIn（300）;

2. 使用位置：固定； 不是彈出框的絕對值（.popup，.overflow）；

3. 您可以使用jquery切換滾動到body類或樣式，以隱藏溢出並設置max-height：100％;