Wie wendet Photowipe Stile an, um das Bild zu verwischen, wenn Sie auf die Schaltfläche zum Teilen klicken?

Sie können das Beispiel hier sehen: http://codepen.io/dimsemenov/pen/gbadPv
Klicken Sie auf Teilen, und Sie werden sehen, es verwischt das Bild (und alles andere).Wie wendet Photowipe Stile an, um das Bild zu verwischen, wenn Sie auf die Schaltfläche zum Teilen klicken?

Ich beobachte dies im Inspektor und ich kann es nicht herausfinden.

Ich habe Quellcode heruntergeladen und setzen eine Uhr in photoswipe-ui-defaults.js in dieser letzten Zeile:

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

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

Es ist nie ausgeführt wird.

Ich habe andere ähnliche modale hinzugefügt und ich möchte den gleichen Effekt erzielen, aber ich kann nicht herausfinden, was getan wird, um diese Unschärfe zu erreichen.

Quelle

2017-04-19 Marko Avlijaš

Nun, es würde teilweise kompliziert aussehen, deshalb ist es für den ersten Blick nicht klar.

Es Allzeit .pswp_share-modal mit diesem css

Teilen Modal gemacht:

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

Wenn Sie irgendwo in js .pswp__share-modal--fade-in Klasse auf den "Share" -Knopf klicken, um das gleiche Element befestigt zu mit diese css:

Modal mit Fade in Effekt:

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

Wie Sie die allgemeine Idee Opazität auf 100% drehen sehen kann, ist, wenn Anteil modal aktiv ist. Blur-Effekt ist vorhanden, weil der aktuelle modale Hintergrund rgba(0,0,0,0.5);

hat

Quelle

2017-04-19 12:32:14

Oh ich sehe Anteil modal tatsächlich über den gesamten Bildschirm gestreckt wird. Ich dachte, es würde nur der modale Dialog sein. –

@ MarkoAvlijaš Yup, es ist gestreckt –

Was Sie tun müssen, ist ein extra div hinzufügen, machen Sie es Vollbild, und fügen Sie dann einen Hintergrund zum div. Ich habe hier ein Beispiel (es sieht hässlich aus, aber Sie werden verstehen, was ich sagen will).

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

Quelle

2017-04-19 12:47:22 RBCunhaDesign

Wie wendet Photowipe Stile an, um das Bild zu verwischen, wenn Sie auf die Schaltfläche zum Teilen klicken?

Antwort

Verwandte Themen