Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2015
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Zoom and Blur Modal Nesting

    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/postcolonialboy/9jq84p1h/144/

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

    Thx

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,517
    Thanks
    3
    Thanked 628 Times in 614 Posts
    Hi there lk4xm10df,

    we no longer need JavaScript for modal windows, CSS can now accommodate them.

    Here is an example...


    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>CSS modal window</title>
    
    <style media="screen">
    html {
        box-sizing: border-box;
     }
    
    *, *::before, *::after {
        box-sizing: inherit;
     }
    
    body {
        background-color: #f9f9f9;
        font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
     }
    
    #r0, #r1 {
        display: none;
     }
    
    #r0:checked~#mask {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 0.625em solid #666;
        opacity: 1;
        box-shadow: inset 0 0 2.5em rgba( 0, 0, 0, 0.6);
        transform: rotateX( 0deg );    
     }
    	
    #mask {
        position: fixed;
        z-index: 2;
        top: 50%;
        left: 0%;
        right: 0%;
        bottom: 50%;
        border-width: 0;
        opacity: 0;
        box-shadow: inset 0 0 0 rgba( 0, 0, 0, 0.6);
        transform: rotateX( 90deg );
        background: linear-gradient(to bottom,rgba( 255, 255, 255, 0.3),rgba( 255, 255, 255, 0.5));
        overflow: hidden;
        transition: all 1s ease;
     }
    
    #box { 
        position: relative;
        max-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        margin: 6em auto;
        background-image: linear-gradient(to bottom, transparent, transparent );
        box-shadow: 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0);
        color: transparent;
        transition: all 1s ease-in-out;
     }
    
    #r0:checked ~ #mask #box {
        max-width: 20.5em;
        padding: 0.25em 1.5em 1em;
        border: 0.125em solid #000;
        border-radius: 0.625em;
        background-image: linear-gradient(to bottom, #fff, #888 );
        box-shadow: 0.3em 0.3em 0.3em rgba( 0, 0, 0, 0.4);
        color: #000;
     }
    
    #box h2 {
        text-align: center;   
     }
    
    #overlay {
        display:block;
        width: 10em;
        line-height: 3em;
        margin: 1em auto;
        border-radius: 0.75em;
        font-weight: bold;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        text-shadow: 0 0 0.1em #030;
        cursor: pointer;
        background:  linear-gradient(to bottom,rgba(0,136,1136,0.3),rgba(0,56,56,0.7));
        box-shadow: 0.1em 0.1em 0.25em #000;
     }
    
    #close {
        position: absolute;
        top: -1em;
        right: -0.875em;
        padding: 0.25em 0.5em;
        border-radius: 50%;
        font-weight: bold;
        color: transparent;
        cursor: pointer;
        background-color: transparent;
        box-shadow: 0.1em 0.1em 0.25em transparent;
        transition: all 0.25s ease-in-out;
     }
    
    #r0:checked ~ #mask #box #close {
        color: #fff;
        cursor: pointer;
        background-color: #333;
        box-shadow: 0.1em 0.1em 0.25em #000;
     }
    
    #r0:checked ~ #mask #box #close:hover,
    #r0:checked ~ #mask #box #close:active  {
        background-color: #fc0000;
     }
    
    #content {
        max-width: 50em;
        padding: 1.6em;
        margin: auto;
        border: 1px dotted #999;
        background-color: #fff;
        font-size: 1.25em;
        transition: 0.5s ease-in-out;
     }
    
    #r0:checked~#content {
        font-size: 1em;   
        filter: blur( 0.1em );
     }
    
    @media ( max-width: 27em ) {
    #r0:checked ~ #mask #box {
        max-width: 80%;
      }
     }
    </style>
    
    </head>
    <body>
    
    <input id="r0" name="r" type="radio">
    <input id="r1" name="r" type="radio">
    
    <label id="overlay" for="r0">open overlay</label>
    <div id="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
      Curabitur sit amet sem sed libero bibendum tempus faucibus       
      quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor 
      nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis 
      interdum justo ac justo vehicula consequat. Curabitur et 
      volutpat nibh. Phasellus rutrum lacus at dolor placerat 
      feugiat. Morbi porta, sapien nec molestie molestie, odio 
      magna vestibulum lorem, vitae feugiat est leo sit amet 
      nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac 
      magna sed, pretium commodo odio. Sed porttitor augue velit, 
      quis placerat diam sodales ac. Curabitur vitae porta ex. 
      Praesent rutrum ex fringilla tellus tincidunt interdum. 
      Proin molestie lectus consectetur purus aliquam porttitor. 
      Fusce ac nisi ac magna scelerisque finibus a vitae sem.
     </p><p>
      Donec vehicula diam non leo efficitur, id euismod odio 
      tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed 
      et libero non diam tempor sagittis. Quisque vel egestas 
      ipsum. Integer sed elit eu orci blandit commodo in in erat. 
      Donec blandit, mi at gravida varius, nulla tellus vulputate 
      ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
      penatibus et magnis dis parturient montes, nascetur ridiculus 
      mus. Curabitur tristique varius ullamcorper.
     </p><p>
      Nam venenatis diam ante, et cursus elit porttitor at. Morbi 
      mattis leo at ex vehicula, non vestibulum ligula aliquam. 
      Maecenas non nibh sollicitudin, porttitor odio in, elementum 
      arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac 
      rutrum odio bibendum volutpat. Phasellus ac sem consequat 
      lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
      augue. Curabitur ullamcorper sit amet libero in ullamcorper. 
      Donec sed laoreet quam. Phasellus malesuada libero felis, non 
      elementum ex tincidunt eget. Quisque cursus arcu vel diam 
      consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
     </p><p>
      In sapien massa, feugiat ut magna eu, hendrerit porttitor 
      justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam 
      facilisis, et molestie dolor blandit. Pellentesque non lectus 
      odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. 
      Duis congue dignissim ante ut consequat. Sed nec sagittis 
      neque, quis vehicula urna. Fusce laoreet interdum ligula vel 
      finibus. Nunc odio purus, dapibus sit amet orci eget, congue 
      eleifend erat. Quisque porttitor imperdiet ullamcorper. 
      Aenean non orci nec magna tempor porta at id ipsum.
     </p><p>
      Cras euismod euismod nibh, nec hendrerit ante efficitur id. 
      Donec sit amet interdum mauris. Maecenas pellentesque, sem a 
      commodo tincidunt, quam ex viverra nibh, non consectetur odio 
      quam et velit. Nulla eu risus quis magna suscipit malesuada 
      vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id 
      elementum nisi interdum. Integer sem quam, tincidunt nec quam 
      ac, lobortis volutpat ipsum. Curabitur nec turpis viverra, 
      eleifend arcu non, egestas felis. Etiam a eros felis. Aliquam 
      nec ullamcorper enim. Donec sit amet commodo ante, vitae 
      consectetur sem. Proin ut luctus dolor. Integer lectus massa, 
      maximus nec urna non, ullamcorper hendrerit mi. 
     </p>
    </div>
    <div id="mask">
    
    <div id="box">
     <label id="close" for="r1" title="Close" >X</label>
     <h2>NOTICE:</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
      bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
      posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
    </p>
    <!-- end #box --></div>
    
    <!-- end #mask --></div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  3. Users who have thanked coothead for this post:

    lk4xm10df (Jun 13th, 2019)

  4. #3
    New Coder
    Join Date
    Jul 2015
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts
    @coothead thanks for the response.
    although it replicates the functionality (somewhat), I was also hoping that there could be a nested modal that when clicked it zooms and blurs everything again...
    thanks

  5. #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,517
    Thanks
    3
    Thanked 628 Times in 614 Posts

    Quote Originally Posted by lk4xm10df View Post
    I was also hoping that there could be a nested modal that
    when clicked it zooms and blurs everything again
    I do not understand that or this...


    Could anyone please help to get nested multiple modals to
    again zoom and blur everything further again on popup?
    ...but thought that I would point out, while I was here,
    that CSS is now the preferred method for modal windows.

    Perhaps you can help me to understand better what it is
    that you additionally require.

    coothead
    ~ the original bald headed old fart ~

  6. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,513
    Thanks
    4
    Thanked 506 Times in 494 Posts
    With modals it can also be done more accessibly with :target and anchors, though the use of input:checked is functional as well.

    Though I'd get rid of all the ID nonsense on the CSS side and use adjacent sibling to simplify things even further. Radio buttons might also be a better choice than checkbox so you can switch between which ones are open easier.

    This really is a poster child for everything people do WRONG with the train wreck laundry list of how NOT to write JavaScript that is jQuery, and worse using JavaScript for things we've not needed scripting for in over a decade.

    So... how I'd approach it first we'd have a radio button for handling the close.

    Code:
    <input type="radio" name="modal" id="toggle_modalsOff" class="toggleAll" hidden checked>
    All the close labels would point at that.

    Then each dialog would go something like this:

    Code:
    <input type="radio" name="modal" id="toggle_modal1" class="toggle" hidden>
    <div>
    	<label for="toggle_modalsOff"></label>
    	<div>
    		<label for="toggle_modalsOff">&#x1F5D9;</label>
    		<label for="toggle_modal2">Open Nested Modal 2</a><br>
    		<label for="toggle_modal3">Open Nested Modal 3</a>
    	</div>
    </div>
    Those inner label handling all the closing, even the "click outside the dialog" closure would be handled thus. If we make sure the first modalsOff label is direct child of the outer div, and the inner modalsOff label is the first-child, and this div is always after our INPUT.toggle, NONE of this warrants the presence of any extra id's or classes than what you see here.

    The big trick is the "any sibling selector" as what we can do is wrap the content in a DIV. There is however the problem of handling scrollbars which centering with flex utterly screws up. Display grid -- even thought it leaves legacy IE without centering -- is a better choice as we can then handle the scrollbars with a double-wrapper... so the content area would be along these lines:

    Code:
    <div id="content"><div id="contentInner">
      Your content here
    </div></div>
    The outer DIV and all the modals would be absolute positioned as full screen with overflow:auto, that way their scrollbars will overlap regardless of which has top z-index.

    Code:
    html, body {
    	height:100%;
    	overflow:hidden;
    	/*
    		scrolling will be handled by inner DIV for best small-screen
    		behavior. Otherwise we risk having two scrollbars with the modals.
    	*/
    }
    
    .toggle,
    .toggleAll {
    	/*
    		IE screws up the label relationship if 'hidden' so show them
    		we want 'hidden" in the markup though so that non-screen users
    		don't see a bunch of non-functional junk.
    	*/
    	display:block;
    	/*
    		But we still want them not visible, so slide them off the page
    	*/
    	position:absolute;
    	left:-999em;
    }
    
    .toggle + div, /* outer modal div */
    .toggle + div > label, /* outer close / deselect */
    #content {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	overflow:auto; /* don't forget small screens! */
    }
    
    .toggle + div {
    	box-sizing:border-box;
    	padding:1em;
    	display:grid;
    	align-items:center;
    	justify-content:center;
    	z-index:2;
    	/*
    		Hide offscreen instead of display:none since 1) it's easier to animate
    		with CSS, and 2) search engines look for display:none to ignore content
    		as it has been abused to death by black-hat SEO dirtbags
    	*/
    	left:-999em;
    	opacity:0;
    	transition:opacity 0.3s, left 0s 0.3s;
    	background:rgba(255,255,255,0.5);
    }
    
    .toggle:checked + div {
    	left:0;
    	opacity:1;
    	transition:opacity 0.3s;
    }
    
    .toggle + div > div {
    	position:relative;
    	width:90%;
    	max-width:40em;
    	padding:1em;
    	background:rgba(255,255,255,0.6);
    	border-radius:0.5em;
    	box-shadow:0 0 0.5em 1em rgba(255,255,255,0.6);
    }
    
    .toggle + div > label {
    	cursor:not-allowed;
    }
    
    .toggle + div > div > label:first-child { /* close button */
    	position:absolute;
    	top:-0.75em;
    	right:-0.75em;
    	width:1.5em;
    	text-align:center;
    	font:normal 1em/1.5em arial,helvetica,sans-serif;
    	cursor:pointer;
    }
    
    #contentInner {
    	transition:all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
    }
    
    .toggle:checked ~ #content #contentInner {
    	transform:scale(0.8);
    	filter:blur(0.125em);
    }
    
    h1 {
    	font-size:200%;
    	padding:0.5em;
    }
    
    .modalSelect {
    	list-style:none;
    	padding:0 1em 1em;
    }
    
    .modalSelect label {
    	display:inline-block;
    	padding:0.25em 0.5em;
    	margin-bottom:0.25em;
    	background:#DDD;
    	border:1px solid #888;
    	border-radius:0.5em;
    	box-shadow:inset 0 0.5em 0.5em #FFF;
    	cursor:pointer;
    }
    
    p {
    	padding:0 1em 1em;
    }
    Assuming a decent reset is in use. No jQuery, no framework crap, and is coded so that it doesn't screw over mobile / small screen users which the negative margins + positioning you used or display:flex has the nasty habit of doing. If I REALLY cared about getting it to work 100% right in IE (which I no longer do) I'd use display:table.

    Live demo here:

    https://cutcodedown.com/for_others/lk4xm10df/

    Directory wide open for easy access to the gooey bits and pieces, and I tossed a .txt of the markup in there just in case you have trouble with view-source.

    Again, not even JavaScript's job anymore... and certainly not something to use the {string of expletives omitted} trash that is jQuery on. CSS selectors, they're that powerful.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  7. Users who have thanked deathshadow for this post:

    lk4xm10df (Jun 13th, 2019)

  8. #6
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,513
    Thanks
    4
    Thanked 506 Times in 494 Posts
    I also just added a version that uses hash links and :target. In some cases it's a better choice in terms of accessibility and usability as well as the leaner code, but it can screw up where the user was scrolled to when you close the dialog. Still it's a technique to know.

    the close all input goes away, and to close we just <a href="#">Close</a>. You can link to anything on the page for the closure, and anything you can href to can be made modal.

    So the dialog itself gets rewritten as:

    Code:
    <div id="modal1" class="modal">
    	<a href="#"></a>
    	<div>
    		<a href="#"></a>
    		<a href="#modal2">Open Nested Modal 2</a><br>
    		<a href="#modal3">Open Nested Modal 3</a><br>
    	</div>
    </div>
    Which is far, far, simpler. For the most part the CSS remains similar, just with "input + div", "input:checked + div", and "input:checked ~ #content" replaced by ".modal", ".modal:checked", and ".modal:checked ~ #content" respectively. Of course since they're anchors it helps to play with the style a bit.

    They're all in the same directory:
    https://cutcodedown.com/for_others/lk4xm10df/

    Just as "modals_hash" instead of just "modals".

    Oh, in both examples I made the backgrounds heavier and added a second background area to the modal itself, because 40% background even with the blur REALLY compromised legibility. The resultant background was still too random, jumbled, and dark to maintain legible colour contrasts even with black text.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  9. Users who have thanked deathshadow for this post:

    lk4xm10df (Jun 13th, 2019)

  10. #7
    New Coder
    Join Date
    Jul 2015
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks @deathshadow - it's working great, and aligns very well to smaller screens.

    the last thing--and yes @coothead it's hard to explain--is that clicking a link to a nested nodal should push everything back again and blur - like simulating layers/depth of field.

    i've attached an image to explain this:
    -sample.jpg

    hopefully it is clear!

  11. #8
    New Coder
    Join Date
    Jul 2015
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts
    here is a clearer version: https://ibb.co/LNB83jm

  12. #9
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,513
    Thanks
    4
    Thanked 506 Times in 494 Posts
    That would be -- IMHO at least -- taking it too far. It's already far too cutesy an effect that's compromising legibility, without further compounding that problem by making them ALL layer atop each-other making for a far, far less legible page.

    This really isn't something i'd deploy on a page in the first place, but going for layering/tracking all the open ones at once? That's just begging for it to piss off users rather than help them. Don't stray too far from the norm, it exists for a reason... that reason being such artsy stuff has been tried in the past and it's always a train wreck that does more harm than good.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  13. Users who have thanked deathshadow for this post:

    lk4xm10df (Jun 14th, 2019)

  14. #10
    New Coder
    Join Date
    Jul 2015
    Posts
    32
    Thanks
    5
    Thanked 0 Times in 0 Posts
    ok i'd never thought I'd take advice from a @deathshadow but i guess the dark side is right.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •