5

I have created a modal using html, css and JavaScript, codes of which are included in snippets.

You will notice that when a modal window is opened , it has a sliding from top animation.

I want to make the modal window to have sliding to bottom animation ( instead of just disappearing instantly while being at its place) while it is closing

Can someone please adjust the codes to have the desired effect? Thanks in advance!

let open_modals = [];

(function() {

  // Get the button that opens the modal
  // read all the control of any type which has class as modal-button
  var btn = document.querySelectorAll(".modal-button");

  // All page modals
  var modals = document.querySelectorAll('.modal');

  // Get the <span> element that closes the modal
  var spans = document.getElementsByClassName("close");

  // When the user clicks the button, open the modal
  for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function(e) {
      e.preventDefault();
      modal = document.querySelector(e.target.getAttribute("href"));
      modal.style.display = "block";
      open_modals.push(modal.id);
    }
  }

  // When the user clicks on <span> (x), close the modal
  for (var i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          modals[index].style.display = "none";
          open_modals.pop();
        }
      }
    }
}
})();
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* The Modal (background) */

.modal {
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 0.1875em;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  color: white;
  position: relative;
  background-color: #171B20;
  margin: auto;
  padding: 0;
  border: 0.0625em solid #888;
  width: 97%;
  box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.2), 0 0.375em 1.25em 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}


/* The Close Button */

.close {
  color: #F0B823;
  float: right;
  font-size: 9vw;
  font-weight: bold;
  position: absolute;
  right: 0.25em;
  top: -0.25em;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0.125em 1em;
  background-color: #171B20;
  color: #F0B823;
}

.modal-body {}

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20;
  border: none;
  color: white;
  padding: 0.248em 0.496em;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 7vw;
  margin: 0.124em 0.062em;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  width: auto;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 50vh;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 6.50vw;
}

.bodytext {
  font-size: 3.90vw;
  font-family: 'Quicksand', sans-serif;
  display: block;
  padding: 0.625em 0.9375em;
}

p {
  display: block;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">• Click Me</a>

<!-- The Modal -->
<div id="myModal1" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">×</span>
            <div class="headertext">
                <p>Modal Header</p>
            </div>
        </div>
        <div class="modal-body">
            <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
            <div class="bodytext">
                <p>Body Text Comes here</p>
            </div>
        </div>
    </div>
</div>
Sam
  • 1,459
  • 1
  • 18
  • 32
Badal Singh
  • 479
  • 8
  • 24
  • What have you tried to create the animation? – Emiel Zuurbier Aug 30 '19 at 06:22
  • @EmielZuurbier yes i tried indeed. What i did was basically just reversed the animation stuff ( which can find below "modal-content" [ class name and how it is defined ] but i didn't know which Css class do i put that animation to have the intended effect – Badal Singh Aug 30 '19 at 06:26

3 Answers3

1

Hope this will help you

$(function() {
  $(".modal-button").on('click', function(e){
    e.preventDefault();
    modal = $($(this).attr("href"));
    modal.css("display", "block");
    modal.animate({
      top: '0',
      opacity: '1'
    }, 400);
  });
  
  $(".close").on('click', function(e){
    e.preventDefault();
    modal = $($(this).closest(".modal"));
    modal.animate({
      top: '300',
      opacity: '0'
    }, 400, function(){
      $(this).css("top", "-300px");
      $(this).css("display", "none");
    });
  });
});
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

.modal {
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 0.1875em;
  left: 0;
  top: -300px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

.modal-content {
  color: white;
  position: relative;
  background-color: #171B20;
  margin: auto;
  padding: 0;
  border: 0.0625em solid #888;
  width: 97%;
  box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.2), 0 0.375em 1.25em 0 rgba(0, 0, 0, 0.19);
}

.close {
  color: #F0B823;
  float: right;
  font-size: 9vw;
  font-weight: bold;
  position: absolute;
  right: 0.25em;
  top: -0.25em;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0.125em 1em;
  background-color: #171B20;
  color: #F0B823;
}

.modal-body {}

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20;
  border: none;
  color: white;
  padding: 0.248em 0.496em;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 7vw;
  margin: 0.124em 0.062em;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  width: auto;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 50vh;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 6.50vw;
}

.bodytext {
  font-size: 3.90vw;
  font-family: 'Quicksand', sans-serif;
  display: block;
  padding: 0.625em 0.9375em;
}

p {
  display: block;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">• Click Me</a>

<!-- The Modal -->
<div id="myModal1" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">×</span>
            <div class="headertext">
                <p>Modal Header</p>
            </div>
        </div>
        <div class="modal-body">
            <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
            <div class="bodytext">
                <p>Body Text Comes here</p>
            </div>
        </div>
    </div>
</div>
ciekals11
  • 2,032
  • 1
  • 10
  • 24
  • Well thanks. Your codes are working well i just have one question. Can you somehow include your JavaScript code in mine. I don't want to totally replace with your JavaScript code as mine is very crucial ( it has many different functions which are important to me ). Secondly don't know why the Animations through JavaScript seem bit weird to me , the ones though CSS were lot smoother i would say. For better reference you can compare your output and mine ( just for the top sliding animation while Modal Window opens ) – Badal Singh Aug 30 '19 at 07:13
1

Demo https://codepen.io/phong18/pen/VwZzZQm

add more css 

@-webkit-keyframes animateBottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: 500px;
    opacity: 0;
  }
}

@keyframes animateBottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: 300px;
    opacity: 0;
  }
}
.modal-content-active {

  -webkit-animation-name: animateBottom;
  -webkit-animation-duration: 0.4s;
  animation-name: animateBottom;
  animation-duration: 0.4s;
}

and fixed js 

    // When the user clicks on <span> (x), close the modal
  for (var i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          modals[index].classList.add("modal-content-active");
          var item = modals[index];
          setTimeout(function(){
            item.classList.remove("modal-content-active");
            item.style.display = "none";
            open_modals.pop();

          },400);
        }
      }
    }
  }

//   When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          modals[index].classList.add("modal-content-active");
          var item = modals[index];
          setTimeout(function(){

            item.classList.remove("modal-content-active");
            item.style.display = "none";
            open_modals.pop();

          },400);

        }
      }
    }
  }

Create class .modal-content-active then add it to modal after click close icon, then wait 0.4 second to remove modal. Hope to help you.

vnsharetech Phong Nguyen
  • 91
  • 6
  • Sir please do one small edit. Like you added settimeout function for exiting modal when "x" is tapped. Please do the same implementation for user clicking outside of modal window to close it – Badal Singh Aug 30 '19 at 07:39
  • Thanks a ton , that was really quick – Badal Singh Aug 30 '19 at 07:48
  • Hello sir I just need one last small help from you Actually my original JavaScript code had the functionality to open 2 modal windows together (using array ) , then i could close them both one by one Now coming to the issue ... After i have added ur settimeout code to implement downwards sliding Animation , the above mentioned functionality is partially broken If you open both the modals windows together and proceed to close the second one it closes well but the first window doesn't gets closed ( first window will get closed normally if second window is not touched ). Here – Badal Singh Aug 30 '19 at 09:11
  • current, if you open 2 popups then close second one, then the first popup is auto close also, right? – vnsharetech Phong Nguyen Aug 30 '19 at 09:19
  • current situation - if you open both windows 1 by 1 , and then proceed to close them. Second window will get closed. But first window isn't getting closed – Badal Singh Aug 30 '19 at 09:20
  • to make it easier for you to understand. Just open the jsbin link i have sent now replace the original JavaScript code from my question .. you will see that everything is working fine. ( Just the downwards sliding would not be there obviously ) as your settimeout is absent – Badal Singh Aug 30 '19 at 09:27
  • i checked the updated code. Pasted the same in jsbin. Updated Status - After we have opened both the windows and then we proceed to close them 1 by 1. Second gets closed , first window also gets closed at first. But it reappears within less than 1 second and again doesn't gets closed like before codes + output here - https://jsbin.com/tuyiwetima/1/edit – Badal Singh Aug 30 '19 at 09:41
  • Yeah I fixed it. Use item.style.display = "none"; instead of modal.style.display = "none"; – vnsharetech Phong Nguyen Aug 30 '19 at 15:20
  • yep that fixed it. Thanks a ton sir. You are a life saver – Badal Singh Aug 30 '19 at 15:32
  • No problem, Badal. – vnsharetech Phong Nguyen Aug 30 '19 at 15:39
  • sorry to bother you again sir , but can you please help me in this. , Its last thing. After this my modal will be completed https://stackoverflow.com/q/57784163/11988417 – Badal Singh Sep 04 '19 at 08:54
  • yeah i can take a look – vnsharetech Phong Nguyen Sep 04 '19 at 08:56
  • hello sir. I updated my post with whatever i did till now. I created the css class having blur effect. Now just JavaScript is remaining https://stackoverflow.com/q/57784163/11988417 – Badal Singh Sep 04 '19 at 13:54
  • I fixed your problem, please check. – vnsharetech Phong Nguyen Sep 04 '19 at 15:38
1

Add other class animation name animationbottom

@keyframes animatebottom {
  from {
    top: 0;
    opacity: 1;
  }
  to {
    top: 300px;
    opacity: 0;
  }
}

and a new class .modal-fade for specifying the animation-name.

.modal-fade {
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 0.4s;
  animation-name: animatebottom;
  animation-duration: 0.4s;
}


let open_modals = [];

$(function() {

  // Get the button that opens the modal
  // read all the control of any type which has class as modal-button
  var btn = document.querySelectorAll(".modal-button");

  // All page modals
  var modals = document.querySelectorAll('.modal');

  // Get the <span> element that closes the modal
  var spans = document.getElementsByClassName("close");

  // When the user clicks the button, open the modal
  for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function(e) {
      $("#myModal1").removeClass("modal-fade"); // added
      e.preventDefault();
      modal = document.querySelector(e.target.getAttribute("href"));
      modal.style.display = "block";
      open_modals.push(modal.id);
    }
  }

  // When the user clicks on <span> (x), close the modal
  for (var i = 0; i < spans.length; i++) {
    spans[i].onclick = function() {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          $("#myModal1").addClass("modal-fade"); // added
          setTimeout(function(){
          $("#myModal1").hide(); 
          open_modals.pop();}, 400);
        }
      }
    }
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    
    if (event.target.classList.contains('modal')) {
      for (var index in modals) {
        if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
          modals[index].style.display = "none";
          open_modals.pop();

        }
      }
    }
  }
})
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* The Modal (background) */

.modal {
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 0.1875em;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  color: white;
  position: relative;
  background-color: #171B20;
  margin: auto;
  padding: 0;
  border: 0.0625em solid #888;
  width: 97%;
  box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.2), 0 0.375em 1.25em 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

/* added */
.modal-fade {
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 0.4s;
  animation-name: animatebottom;
  animation-duration: 0.4s;
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatebottom {
  from {
    top: 0;
    opacity: 1;
  }
  to {
    top: 300px;
    opacity: 0;
  }
}

/* The Close Button */

.close {
  color: #F0B823;
  float: right;
  font-size: 9vw;
  font-weight: bold;
  position: absolute;
  right: 0.25em;
  top: -0.25em;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0.125em 1em;
  background-color: #171B20;
  color: #F0B823;
}

.modal-body {}

.modal-button {
  font-family: 'Quicksand', sans-serif;
  background-color: #171B20;
  border: none;
  color: white;
  padding: 0.248em 0.496em;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 7vw;
  margin: 0.124em 0.062em;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  width: auto;
}

.modal-button:hover {
  background-color: #171B20;
  color: #F0B823;
}

.pic {
  margin: auto;
  display: block;
  height: auto;
  width: 50vh;
}

.headertext {
  font-family: 'Quicksand', sans-serif;
  display: block;
  text-align: center;
  font-size: 6.50vw;
}

.bodytext {
  font-size: 3.90vw;
  font-family: 'Quicksand', sans-serif;
  display: block;
  padding: 0.625em 0.9375em;
}

p {
  display: block;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">• Click Me</a>

<!-- The Modal -->
<div id="myModal1" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">×</span>
            <div class="headertext">
                <p>Modal Header</p>
            </div>
        </div>
        <div class="modal-body">
            <img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
            <div class="bodytext">
                <p>Body Text Comes here</p>
            </div>
        </div>
    </div>
</div>
Deepu Reghunath
  • 8,132
  • 2
  • 38
  • 47
  • I am not sure but i think ur JavaScript won't work if there are 2 modals on 1 Page. Second modal having id #myModal2. I think the accepted answer having settimeout function for animation in JavaScript is a better approach. Thanks a lot anyways. I just thought to mention it – Badal Singh Aug 30 '19 at 07:34