如何在屏幕上显示弹出中心

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