2 Replies - 363 Views - Last Post: 14 June 2019 - 04:29 AM

#1 2pq95hc98   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 10-July 15

Zoom and Blur Modal Nesting

Posted 12 June 2019 - 02:03 PM

Hi all,

Just trying to create a modal that zooms and blurs the background back. Based on avgrund by hakim https://lab.hakim.se/avgrund/

I extended it to get several modals to work.

See fiddle: https://jsfiddle.net...y/9jq84p1h/144/

Could anyone please help to get nested multiple modals to again zoom and blur everything further again on popup?

thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Zoom and Blur Modal Nesting

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2434
  • View blog
  • Posts: 7,431
  • Joined: 15-January 14

Re: Zoom and Blur Modal Nesting

Posted 12 June 2019 - 03:19 PM

That doesn't really look like the best thing to try to extend, with how it nests all of the elements and everything. You can try to add other modals the same way and see if they'll open at all though. The Javascript code uses a bunch of single-letter identifiers so that's not the best either. The effect is just done with CSS, it's using the blur and scale filters. You can use that concept but you'll probably have to increase and decrease the blur and scale each time you apply or cancel one level.
Was This Post Helpful? 0
  • +
  • -

#3 2pq95hc98   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 10-July 15

Re: Zoom and Blur Modal Nesting

Posted 14 June 2019 - 04:29 AM

Hi all,
Just trying to create a modal that zooms and blurs the background back. Based on avgrund by hakim https://lab.hakim.se/avgrund/
Now it has nesting modals also with the help of @deathshadow over at codingforums.
Here is the current state:
https://jsfiddle.net...oy/1jz0q3xk/19/
Now, what I am trying to do is:
by clicking the nested modal link, everything should be pushed back again and blurred - like simulating receding layers/depth of field.
I've attached an image to explain this.
Thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1