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

我有一個產品列表，當我點擊每個產品時顯示一個彈出窗口，但此彈出窗口顯示在頁面頂部，不透明度不在所有屏幕中。如何在屏幕上顯示彈出中心

我彈出：

$('.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>

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

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

我的問題是什麼？

謝謝

來源

2017-04-11 user3242861

設置不透明層的頂部和左側。彈出窗口不應該是100％的寬度和高度。如果您可以將其設置爲固定寬度和高度（以像素爲單位），則可以將左邊距和上邊距設置爲50％以將其居中。 – Archer

使用https://v4-alpha.getbootstrap.com/components/modal/ – Roy

@Roy爲什麼要使用框架？ – madalinivascu

不透明度動畫問題：如果你使用顯示：無與不透明度的CSS動畫難道不工作，所以我建議使用jQuery的不是$（「彈出」）顯示（）;但fadeIn和fadeOut - $（'。opacity'）。fadeIn（300）;
使用位置：固定;不是絕對的彈出塊（.popup，.overflow）;
滾動你可以隱藏切換到jquery到隱藏溢出和設置最大高度的主體類或樣式：100％;

來源

2017-04-11 11:53:59

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

回答

相關問題