单击共享按钮时，photoswipe如何将样式应用于模糊图像？

Question

您可以在此处查看示例： http : //codepen.io/dimsemenov/pen/gbadPv
单击共享按钮，您将看到图像模糊（以及其他所有图像）。

我在检查器中观察到了这一点，但无法解决。

我已经下载了源代码，并且在最后一行的photoswipe-ui-defaults.js中设置了监视功能：

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

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

它永远不会执行。

我添加了其他类似的模态，但我想实现相同的效果，但是我无法弄清楚要实现那种模糊效果的方法。

Answer 1

好吧，它看起来部分复杂，这就是为什么乍一看不清楚的原因。

所有的时间都与此CSS呈现.pswp_share-modal

共享模式：

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

Answer 2

您要做的是添加一个额外的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>

单击共享按钮时，photoswipe如何将样式应用于模糊图像？

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-04-19 12:32:14

解决方案2
1 2017-04-19 12:47:22

单击共享按钮时，photoswipe如何将样式应用于模糊图像？

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-04-19 12:32:14

解决方案2 1 2017-04-19 12:47:22

解决方案1
1 已采纳 2017-04-19 12:32:14

解决方案2
1 2017-04-19 12:47:22