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

Question

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

我正在 inspector 中观察这个，但我无法弄清楚。

我已经下载了源代码，它在最后一行 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 中某处的 "share" 按钮时 .pswp__share-modal--fade-in class 附加到与此相同的元素 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 如何应用样式来模糊图像？

How does photoswipe apply styles to blur image when you click on share button?

javascript

css

photoswipe