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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2015
    Posts
    38
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Nested Modals Zoom/Blurring. Issue with Closing Modals.

    Hi all,

    I am trying to add some functionality to this setup.
    As you will see, it is an attempt to make a nested modal setup, that on every click on a modal link, it recedes and blurs everything behind the modal.

    I have managed to make it work, but I am trying to do two things:
    1. make everything fade in and fade out. As of now, the background blurs and recedes slowly, but I would like to control the speed of the modal opening/closing.
    2. make the ESC key close the modals. This is proven difficult, as they are nested....

    Thanks all

    HTML
    Code:
    <div id="content">
     <div class="container">
             <a href="#myModal1" class="modal-button">Modal</a>
         </div>
      </div>
     <div id="myModal1" class="modal">
       <div class="modal-container">
           <header><h2>Modal</h2><span class="close">×</span></header>
           <div class="content">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
              <a href="#myModal2" class="modal-button">
             This is a nested modal link.</a>
             </p>
           </div>
         </div>
     </div>
     <div id="myModal2" class="modal">
       <div class="modal-container">
           <header><h2>Nested Modal</h2><span class="close">×</span></header>
           <div class="content">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
              <a href="#myModal" class="modal-button">
             This is a nested modal link.</a>
             </p>
           </div>
         </div>
     </div>
    CSS
    Code:
    .container {width: 80%;margin: auto;padding-top:40px; font-size: 2vw;}
    #content { position:absolute; top:0; left:0; width: 100%; height:100%; overflow:auto;}
    
    .modal { box-sizing: border-box; display: none; position: fixed; z-index: 1; padding-top: 3.125rem; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; transition: all 1.0s ease; }
    
    .modal-container{-ms-box-orient: vertical; display: -ms-flex; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;font-size: 2vw;}
    
    /* The Close Button */
    .close {float:right; font-size: 4vw;padding-right: 10px; transition: all 1.0s ease;}
    .close:hover, .close:focus { color: lightgrey; text-decoration: none; cursor: pointer; }
    /* Modal Content */
    header, .content, footer {width: 80%;margin:auto;}
    header.image, .contentImage, footer.image {width: 100%;margin:auto;}
    .content {background: none; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow: auto; min-height: 0; height: 80vh;}
    
    .open { overflow: hidden; }
    .open>* { -webkit-filter: blur(5px); filter: blur(5px); transform: scale(0.9); transition: all 0.5s ease-in-out;}
    .modal { -webkit-filter: blur(0px); filter: blur(0px); transform: scale(0.9); transition: all 0.5s ease-in-out;}
    .modal .open { -webkit-filter: blur(5px); filter: blur(5px); transform: scale(0.9); transition: all 0.5s ease-in-out;}
    JS
    Code:
    $(function () {
      const openModals = [];
      $('a.modal-button').click(e => {
        e.preventDefault();
        $(e.target).closest('.modal').add('body').addClass('open');
        openModals.push($($(e.target).attr('href')).fadeIn());
      });
      $(window).add('.close').click(e => {
        e.stopPropagation();
        if ($(e.target).is('.modal, .close')) {
          const closing = openModals.pop().addClass('modal-content-active');
          setTimeout(() => {closing.hide().removeClass('modal-content-active')}, 0);
          if (openModals.length > 0) {
            openModals[openModals.length - 1].removeClass('open');
          } else $('body').removeClass('open');
        }
      });
    });

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,752
    Thanks
    5
    Thanked 539 Times in 525 Posts
    1) Nothing you have so far is JavaScript's job, much less the train wreck of developer ineptitude and incompetence that is jQuery.

    2) Do NOT send "all" transitions, it limits your options and can result in strange load behaviors.

    3) Why are your scripting only elements in the markup?

    4) if all you have for proper content bearing content is a <h2>, a numbered heading, why are you slopping a <header> tag around it? Redundant semantics is as bad as none.

    Seriously, if you want to use the <a href="#modalName"> approach, use .modal:target {} in the CSS instead of JavaScript... then all you need for scripting is to intercept the escape key and test if the modal is showing.

    See my modal tutorial here:
    https://cutcodedown.com/tutorial/modalDialogs

    As an example of why this isn't JavaScript's flipping job. Hence why jQuery's idiotic dumbass .fadeIn() / .fadeOut() crap well... really puts the herp into the derp.
    “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


 

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
  •