What is the process by which photoswipe applies styles to blur an image upon clicking the share button?

If you want to see an example, check out this link: http://codepen.io/dimsemenov/pen/gbadPv
By clicking on the Share button, you'll notice that it blurs the image (and everything else).

Despite inspecting it closely, I still can't seem to figure out how it works.

After downloading the source code, I noticed that a watch was set in the photoswipe-ui-defaults.js file with the following last line:

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

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

Strangely enough, this section never seems to get executed.

Although I have added other modal elements that are similar, I'm having trouble replicating the same blur effect and understanding what exactly is happening behind the scenes.

javascriptcssphotoswipe

Answer №1

At first glance, it may appear somewhat complicated, which is why it might not be immediately clear.

The .pswp_share-modal is consistently rendered with this particular CSS style.

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 the "share" button is clicked in the JavaScript code, the .pswp__share-modal--fade-in class is added to the same element with the following CSS:

Modal with fade-in effect:

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

The main idea behind this design is to set the opacity to 100% when the share modal is active. The blurry effect exists because the actual modal background has an rgba(0,0,0,0.5) color.

Answer №2

To achieve the desired effect, you need to include an additional div element that spans the entire screen and then apply a background style to it. Below is a basic example (although not visually appealing, it demonstrates the concept).

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bring to life the div that has been clicked

There are three divs labeled as "left", "active", and "right" in my setup: Whenever the left div is clicked, it animates to become active and the previously active one moves into its place. I want this same functionality to apply to the right div as well. ...

jquerycssjquery-animate

Generating modal pages on the fly

One thing that's been on my mind is creating modals for my page. Typically, I would include the HTML code for my modal directly in the page like this: <div class="my-modal"> <form action="/home/index"> <input type="text" class="txt- ...

javascriptjqueryhtmlmodal-dialog

Event cancellation received from IncomingMessage

I have a simple express server running on Node with versions 4.13.3 and 4.2.3, respectively. //initialization code app.put('/', function(req, res) { req.on('close', function() { console.log('closed'); }); req.on( ...

javascriptnode.jsexpressstream

Unable to retrieve data from response using promise in Angular 2?

I am struggling to extract the desired data from the response. Despite trying various methods, I can't seem to achieve the expected outcome. facebookLogin(): void { this.fb.login() .then((res: LoginResponse) => { this.acce ...

javascriptangularpromise

Exploring Node.js and JSON: Retrieving specific object attributes

Utilizing ExpressJS, NodeJS, and Bookshelf.js In an attempt to display a user's list of friends, encountering the error "Unhandled rejection TypeError: Cannot read property 'friends' of undefined" when trying to access a property of the obj ...

javascriptjsonnode.jsbookshelf.js

Experiencing difficulty when attempting to save a zip file to the C drive

I came across this code snippet on SO and decided to use it for my project. The goal is to send a simple 1.5mb zip file and save it on my C drive by making a request through Postman with the binary option enabled, sending the zip file to localhost:3012. c ...

javascriptnode.jsexpresszlibfs

The JSON data script is not functioning properly

Is this JSON formatted correctly? Why is it not displaying in the element with #id? I found a similar code snippet on https://www.sitepoint.com/colors-json-example/, copied and replaced the values but it's not functioning. Can anyone shed some light o ...

javascriptjson

Styling tip: Distance the tooltip from its parent element when scrolling through a list

I have a table inside li tag, and I want to display the description on :hover inside td. However, when scrolling through the list, the description content starts to appear with a distance from its parent. Despite trying various combinations of position se ...

htmlangularjscssangularjs-ng-repeat

Using React to display data from a nested JSON object in a table

I am currently working on parsing a JSON object into a table using React. However, I am facing an issue with utilizing the .map() function to create a row for every unique combination of course code, name, transferable_credits, transferable_credits -> i ...

javascriptreactjsjsonnext.jsjsx

Issue with accessing Contacts API functionality in Firefox OS application

I have followed all the instructions provided in this documentation, but I keep encountering errors. My testing environment is the "Firefox OS 2.2" simulator. In my manifest file, I have included two permissions as follows: "permissions": { "deskto ...

javascriptfirefox-os

Android browser experiences a sudden surge of unexpected data influx

I am facing an issue with my application where it maps an array from the state. The array should ideally only contain 6 sets of data, as limited by the backend. However, sometimes it spikes and displays data that is not supposed to be there or shows old da ...

javascriptandroidreactjsfrontend

What is the best way to incorporate a button in my code that automatically triggers changes at regular intervals?

Is there a way to automatically change the color of my working traffic light in JavaScript on a timed basis, rather than relying solely on button clicks? Here is the current code I am using: <!DOCTYPE html> <html> <head> <style> # ...

javascripthtmlcss

Why does jQuery function properly in jsfiddle, but not in an HTML file?

I have been troubleshooting repeatedly, but I am unable to figure out why the jQuery code is not functioning as expected. Strangely enough, it works perfectly in jsfiddle! Here is the HTML code: <!doctype html> <html> <head> <meta ch ...

javascriptjqueryhtml

Updating a global variable in Angular after making an HTTP call

I'm facing a challenge where I have a global variable that needs to be updated after an HTTP GET call. Once updated, I then need to pass this updated variable to another function. I'm struggling to figure out the best approach for achieving this. ...

javascriptangularjs

Adjust the spacing between the title and other elements in an R Shiny application

How do I modify the font and size of a title, as well as add some spacing between the title and other elements? navbar <- navbarPage( Title = "Intervals", tabPanel("Data Import", sidebarLayout(sidebarPanel(fi ...

cssrshiny

Is there a way to establish a universal font for all apps within ant design?

I am currently working with NextJS version 14 and I have the following setup: In my globals.css file, I have imported a Google font like so: @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800& ...

cssnext.jsantd

What is the process for validating dates using JavaScript?

I'm currently working on a birthday validation form using JavaScript and I'm facing some issues. For instance, the date 40/40/2012 should be considered invalid but no alert is being triggered. Here is the JavaScript code: function validateBirth ...

javascriptvalidationdate

Positioning Data Labels Outside of Pie or Doughnut Charts in Chart.js

I am currently working on a large-scale project and I am in need of a way to position the labels outside of pie charts or doughnut charts. I came across a plugin called outerLabels on GitHub which seems to be the perfect solution for what I need, but I am ...

cssangularchart.jspie-chart

Ways to control the number of function invocations in an AngularJS controller

I am facing a challenge where data is being fetched from multiple controllers, causing functions to hit the server more than fifty times until they receive a response. I am unsure how to handle this situation effectively and would appreciate some guidance. ...

javascriptangularjscontrollers

Executing the AngularJS nested controller only once

I am still new to Angularjs and just started working on an app that has several "projects" each with a local menu displayed on specific pages. The main navbar with footer is located in the Index.html: <body ng-app="ysi-app" ng-controller="MainControlle ...

javascriptangularjs