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 个答案: