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

我有一个产品列表，当我点击每个产品时显示一个弹出窗口，但此弹出窗口显示在页面顶部，不透明度不在所有屏幕中。如何在屏幕上显示弹出中心

我弹出：

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

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

回答

相关问题