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

Question

You can see example here: http://codepen.io/dimsemenov/pen/gbadPv 您可以在此处查看示例： http : //codepen.io/dimsemenov/pen/gbadPv
Click on Share button and you'll see it blurs the image (and everything else). 单击共享按钮，您将看到图像模糊（以及其他所有图像）。

I am observing this in inspector and I can't figure it out. 我在检查器中观察到了这一点，但无法解决。

I have downloaded source code and it set a watch in photoswipe-ui-defaults.js in this last line: 我已经下载了源代码，并且在最后一行的photoswipe-ui-defaults.js中设置了监视功能：

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

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

It never gets executed. 它永远不会执行。

I have added other similar modal and I want to achieve same effect, but I can't figure out what is being done to achieve that blur. 我添加了其他类似的模态，但我想实现相同的效果，但是我无法弄清楚要实现那种模糊效果的方法。

Answer 1

Well, it would looks partly complicated that's why it isn't clear for the first look. 好吧，它看起来部分复杂，这就是为什么乍一看不清楚的原因。

There all time rendered .pswp_share-modal with this css 所有的时间都与此CSS呈现.pswp_share-modal

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

When you click to the "share" button somewhere in js .pswp__share-modal--fade-in class attaches to the same element with this css : 当您单击js中某个位置的“共享”按钮时.pswp__share-modal--fade-in类与此CSS附加到同一元素：

Modal with fade in effect: 具有淡入效果的模态：

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

As you can see the general idea is to turn opacity to 100% when share modal is active. 如您所见，一般的想法是在激活共享模式时将不透明度变为100％。 Blur effect is exist cause actual modal background has rgba(0,0,0,0.5); 存在模糊效果是因为实际的模态背景具有rgba(0,0,0,0.5);

Answer 2

What you have to do is add an extra div, make it full screen, and then add a background to the div. 您要做的是添加一个额外的div，使其全屏显示，然后为div添加背景。 I have an example here (it looks ugly but you'll catch what I'm trying to say). 我在这里有一个例子（看起来很丑，但是您会明白我想说的）。

 $(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