Question

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

我的弹出窗口：

＆＃13;

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

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

当弹出窗口显示时，它允许滚动，不应该。

我想要的是将弹出窗口置于屏幕中心并在所有屏幕中都具有不透明度。

我的问题是什么？

谢谢

Answer 1

不透明度动画问题：如果你在css动画中使用display：none，不透明度就不会起作用，所以我建议在jquery中使用而不是$（'。popup'）。show（）;但是fadeIn和fadeOut - $（'。opacity'）。fadeIn（300）;
使用位置：固定;不是弹出块的绝对值（.popup，.overflow）;
滚动你可以隐藏用jquery切换到隐藏溢出的body类或样式并设置max-height：100％;

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

1 个答案: