Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member
    Join Date
    Jun 2014
    Posts
    43
    Member #
    39433
    Liked
    1 times

    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


    Code:
    HTML
    <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.  

  3. #2
    Member
    Join Date
    Jun 2014
    Posts
    43
    Member #
    39433
    Liked
    1 times


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:35 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com