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

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. 不透明度动画问题:如果您在带有不透明度的 css 动画中使用 display:none 将不起作用，所以我建议在 jquery 中使用而不是 $('.popup').show();但是 fadeIn 和 fadeOut - $('.opacity').fadeIn(300);

2. 使用位置:固定；不是弹出 block 的绝对值(.popup、.overflow)；

3. 您可以隐藏滚动，使用 jquery 切换到 overflow hidden 和设置 max-height:100% 的 body 类或样式；