화면에 팝업 센터를 표시하는 방법

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 애니메이션에 아무도 JQuery와하지에 $ ('. 팝업') 그래서 내가 조언 사용을 작동하지 wouldnt가 쇼(); 하지만 fadeIn과 fadeOut - $ ('. opacity') .fadeIn (300);

2. 사용 위치 : 고정; 팝업 블록 (.popup, .overflow)의 절대 값은 아닙니다.

3. 오버플로가 숨겨져 있고 최대 높이 설정 : 100 % 인 바디 클래스 또는 스타일에 jquery로 토글 링을 숨길 수 있습니다.