How does photoswipe apply styles to blur image when you click on share button?
Question
You can see example here: 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:
_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.
2 answers
solution1
1 ACCPTED 2017-04-19 12:32:14
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
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 :
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. Blur effect is exist cause actual modal background has rgba(0,0,0,0.5);
solution2
1 2017-04-19 12:47:22
What you have to do is add an extra div, make it full screen, and then add a background to the 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.