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

您可以在此处查看示例：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);

它永远不会被执行。

我添加了其他类似的模态，我想达到相同的效果，但是我不知道正在做什么以实现这种模糊。

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

一直使用此 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);

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

相关内容

最新更新

热门标签：