如何photoswipe應用樣式，當你點擊分享按鈕模糊圖像？

你可以在這裏看到示例：
點擊共享按鈕，你會看到它模糊圖像（和其他一切）。如何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š

那麼，這看起來有些複雜，這就是爲什麼它不明確的第一次看。

有渲染.pswp_share-modal本CSS

分享莫代爾所有時間：

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

當您在JS .pswp__share-modal--fade-in類點擊「共享」按鈕某處重視與相同的元素此css：

淡入模態生效：

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

正如你所看到的總體思路是把不透明度爲100％，當份額模式是有效的。模糊效果是存在的原因實際模態背景有rgba(0,0,0,0.5);

來源

2017-04-19 12:32:14

哦，我看到佔有率模式實際上是伸過來整個屏幕。我認爲這將是唯一的模式對話框的一部分。 –

@MarkoAvlijaš沒錯，它伸展 –

你必須做的是添加一個額外的div，使其全屏，然後添加背景的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應用樣式，當你點擊分享按鈕模糊圖像？

回答

相關問題