photoswipe는 공유 버튼을 클릭 할 때 이미지를 흐리게 처리하는 데 스타일을 어떻게 적용합니까?

여기에서 예제를 볼 수 있습니다 : http://codepen.io/dimsemenov/pen/gbadPv
공유 버튼을 클릭하면 이미지가 흐리게 보입니다.photoswipe는 공유 버튼을 클릭 할 때 이미지를 흐리게 처리하는 데 스타일을 어떻게 적용합니까?

나는이 사실을 경관에서 관찰하고 있으며, 나는 그것을 파악할 수 없다.

이 나는 소스 코드를 다운로드 한 그것은이 마지막 줄에 photoswipe-ui-defaults.js에 시계를 설정 : 그것은 결코 실행되지됩니다

_openWindowPopup = function(e) { 
     e = e || window.event; 
     var target = e.target || e.srcElement; 

     pswp.shout('shareLinkClick', e, target);

다른 유사한 모달을 추가했으며 동일한 효과를 얻고 싶지만 그 불투명도를 달성하기 위해 무엇이 완료되고 있는지 파악할 수 없습니다.

출처

2017-04-19 Marko Avlijaš

글쎄, 부분적으로 복잡해 보이므로 첫 번째 모습이 분명하지 않습니다. 이

이 CSS

공유 모달로 .pswp_share-modal 렌더링 모든 시간 : 당신이 JS .pswp__share-modal--fade-in 클래스에서 어딘가에 '공유'버튼을 클릭하면

.pswp_share-modal { 
    display: block; 
    background: rgba(0,0,0,0.5); 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    padding: 10px; 
    position: absolute; 
    z-index: 1600; 
    opacity: 0; 
    -webkit-transition: opacity .25s ease-out; 
    transition: opacity .25s ease-out; 
    -webkit-backface-visibility: hidden; 
    will-change: opacity; 
}

같은 요소에 부착 이 css :

효과에 페이드와 모달 :

.pswp__share-modal--fade-in { 
    opacity: 1 
}

당신은 일반적인 아이디어가 공유 모달이 활성화 된 경우 100 % 불투명도를 설정하는 것입니다 볼 수 있듯이. 실제 모달 배경이 흐려 효과가 있습니다. rgba(0,0,0,0.5);

출처

2017-04-19 12:32:14

아 내가 공유 모달 실제로 화면 전체에 걸쳐 뻗어을 참조하십시오. 모달 대화 상자 부분 일 뿐이라고 생각했습니다. –

@ MarkoAvlijaš 예, 뻗어 있어요. –

추가 작업을 추가하고 전체 화면으로 만든 다음 div에 배경을 추가해야합니다. 여기에 예제가 있습니다. (추한 것처럼 보이지만, 내가 말하고자하는 것을 잡을 수 있습니다.)

$(document).ready(function() { 
 

 
    $('#modal-btn').click(function(){ 
 
    $('.modal').css("display","block"); 
 
    }); 
 

 
    $('.modal').click(function(){ 
 
    $(this).css("display","none"); 
 
    }); 
 

 
});

html, body { 
 
    background-color: #000; 
 
    color: #fff; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 
    
 
.modal { 
 
    background-color: #000; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    display: none; 
 
    height: 100vh; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100vw; 
 
    z-index: 2; 
 
} 
 
    
 
.modal-content { 
 
    background-color: #aaa; 
 
    height: 50%; 
 
    margin: 10px auto; 
 
    text-align: center; 
 
    width: 50%; 
 
    z-index: 3; 
 
}

<html> 
 
<head></head> 
 
<body> 
 
    <!-- Page content --> 
 
    <div> 
 
    The content that goes in the background. 
 
    <button id="modal-btn" class="btn">Open Modal</button> 
 
    </div> 
 
    
 
    <!-- Modal --> 
 
    <div class="modal"> 
 
    <div class="modal-content">The Modal Content</div> 
 
    </div> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</body> 
 
</html>

출처

2017-04-19 12:47:22 RBCunhaDesign

photoswipe는 공유 버튼을 클릭 할 때 이미지를 흐리게 처리하는 데 스타일을 어떻게 적용합니까?

답변

관련 문제