LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Modal #1





Modal #2





Modal #3



CSS
html, body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #2c3e50;
  margin: 5%;
}

.center, .modal, .modal .modal__content {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
}

.show {
  -webkit-transition: background 500ms ease;
  transition: background 500ms ease;
  background: #354b60;
  padding: 10px 15px;
  margin-right: 5px;
  cursor: pointer;
  color: #fff;
  border: 0;
}
.show:hover {
  background: #1a252f;
}

.close {
  position: absolute;
  cursor: pointer;
  padding: 20px;
  color: white;
  bottom: 0;
  right: 0;
  top: 0;
}

.mask {
  background: rgba(0, 0, 0, 0.68);
  visibility: hidden;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 50;
  opacity: 0;
  left: 0;
  top: 0;
}

.modal {
  -webkit-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
  background: dodgerblue;
  visibility: hidden;
  position: fixed;
  height: 80vh;
  width: 80vw;
  z-index: 100;
  opacity: 0;
}

.active {
  visibility: visible;
  opacity: 1;
}

.active + .modal {
  visibility: visible;
  opacity: 1;
}
JS
// Click function for show the Modal
$(".show").on("click", function(){
  $(this).next(".mask").addClass("active");
});

// Function for close the Modal
function closeModal(){
  $(".mask").removeClass("active");
}

// Call the closeModal function on click
$(".close, .mask").on("click", function(){
  closeModal();
});
Term
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv