помогите с frontend задачой

312
05 января 2019, 00:30

у меня есть токая modal

(function() { 
  // Variables 
  var panel = document.getElementById("js-panel"); 
  var btns = document.querySelectorAll(".flap__btn"); 
  var btnReplay = document.getElementById("js-replay"); 
 
  // On load, init panel 
  var init = function() { 
 
    panel.classList.add("is--open"); 
 
    // If btns are clicked, hide panel 
    // Show replay button     
    for (var i = 0; i < btns.length; i++) { 
      btns[i].addEventListener("click", function() { 
        hidePanel(); 
      }); 
    } 
 
    function hidePanel() { 
      panel.classList.remove("is--open"); 
      btnReplay.classList.add("is--active"); 
    } 
 
    // When replay button is clicked, 
    // reset the stage. 
    btnReplay.addEventListener("click", function() { 
      resetStage(); 
    }); 
  } 
 
  // Hide the button and re-call init 
  function resetStage() { 
    btnReplay.classList.remove("is--active"); 
    init(); 
  } 
 
  // On load, call init function 
  window.onload = function() { 
    init(); 
  } 
})();
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); 
.panel { 
  background: rgba(0, 0, 0, 0.3); 
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3); 
  border-radius: 25px; 
  transition: 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53); 
  -webkit-transform: rotateX(-90deg); 
  transform: rotateX(-90deg); 
} 
 
.panel.is--open { 
  -webkit-transform: rotateX(0deg); 
  transform: rotateX(0deg); 
} 
 
.panel__content { 
  padding-bottom: 4em; 
  background: #fff; 
  border-top-left-radius: 25px; 
  border-top-right-radius: 25px; 
  color: #5a5a5a; 
  text-align: center; 
} 
 
.panel__content h4 { 
  padding: 1.5em 0; 
  border-bottom: 2px solid #ededed; 
  color: pink; 
  font-size: 1.15em; 
  font-weight: 700; 
  text-transform: uppercase; 
} 
 
.panel__content h2 { 
  padding: .5em 1.5em; 
  font-size: 3em; 
  font-weight: 300; 
} 
 
.panel__content p { 
  margin: auto; 
  width: 55%; 
  font-size: 1.15em; 
  font-weight: 300; 
  line-height: 1.4; 
} 
 
.panel__flaps { 
  display: flex; 
  -webkit-perspective: 1000px; 
  perspective: 1000px; 
  -webkit-transform-style: preserve-3d; 
  transform-style: preserve-3d; 
} 
 
.flap { 
  height: 100px; 
  background: #865fdf; 
} 
 
.flap__btn { 
  width: calc((100% - 212px) / 2); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
  background: #8f69e8; 
  color: white; 
  cursor: pointer; 
  font-size: 2.25em; 
  font-weight: 700; 
  text-decoration: none; 
  z-index: 1; 
  transition: .2s ease; 
  -webkit-transform: translate3d(0, 0, 0); 
  transform: translate3d(0, 0, 0); 
  -webkit-transform-origin: top center; 
  transform-origin: top center; 
} 
 
.flap__btn:hover, 
.flap__btn:focus { 
  background: #865fdf; 
  outline: none; 
  -webkit-transform: rotateX(-25deg) translate3d(0, 0, 0); 
  transform: rotateX(-25deg) translate3d(0, 0, 0); 
} 
 
.outer { 
  width: 106px; 
} 
 
.flap--left { 
  border-bottom-left-radius: 25px; 
  -webkit-transform-origin: top right; 
  transform-origin: top right; 
} 
 
.flap--right { 
  border-bottom-right-radius: 25px; 
  -webkit-transform-origin: top left; 
  transform-origin: top left; 
} 
 
.is--open .outer { 
  -webkit-animation: swing 1.5s .2s ease; 
  animation: swing 1.5s .2s ease; 
} 
 
.is--open .flap__btn:first-of-type { 
  -webkit-animation: swing 1.5s .3s ease; 
  animation: swing 1.5s .3s ease; 
} 
 
.is--open .flap__btn:last-of-type { 
  -webkit-animation: swing 1.5s .4s ease; 
  animation: swing 1.5s .4s ease; 
} 
 
@-webkit-keyframes swing { 
  10% { 
    -webkit-transform: rotateX(25deg); 
    transform: rotateX(25deg); 
  } 
  50% { 
    -webkit-transform: rotateX(-15deg); 
    transform: rotateX(-15deg); 
  } 
  75% { 
    -webkit-transform: rotateX(5deg); 
    transform: rotateX(5deg); 
  } 
  90% { 
    -webkit-transform: rotateX(-2.5deg); 
    transform: rotateX(-2.5deg); 
  } 
  100% { 
    -webkit-transform: rotateX(0deg); 
    transform: rotateX(0deg); 
  } 
} 
 
@keyframes swing { 
  10% { 
    -webkit-transform: rotateX(25deg); 
    transform: rotateX(25deg); 
  } 
  50% { 
    -webkit-transform: rotateX(-15deg); 
    transform: rotateX(-15deg); 
  } 
  75% { 
    -webkit-transform: rotateX(5deg); 
    transform: rotateX(5deg); 
  } 
  90% { 
    -webkit-transform: rotateX(-2.5deg); 
    transform: rotateX(-2.5deg); 
  } 
  100% { 
    -webkit-transform: rotateX(0deg); 
    transform: rotateX(0deg); 
  } 
} 
 
.replay { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  padding: .5em; 
  background: #865fdf; 
  border-radius: 3px; 
  color: white; 
  cursor: pointer; 
  opacity: 0; 
  pointer-events: none; 
  text-decoration: none; 
  transition: all .3s; 
  -webkit-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%); 
} 
 
.replay:hover, 
.replay:focus { 
  background: #8f69e8; 
  outline: none; 
  box-shadow: 0 0 25px #865fdf; 
} 
 
.replay:active { 
  -webkit-transform: translate(-50%, -50%) scale(0.9); 
  transform: translate(-50%, -50%) scale(0.9); 
} 
 
.replay.is--active { 
  opacity: 1; 
  pointer-events: initial; 
} 
 
*, 
*:before, 
*:after { 
  -webkit-font-smoothing: antialiased; 
  font-smoothing: antialiased; 
  text-rendering: optimizeLegibility; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  height: 100%; 
} 
 
body { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: #2e2e2e; 
  font-family: "Lato", Arial, sans-serif; 
  -webkit-perspective: 1000px; 
  perspective: 1000px; 
  -webkit-transform-style: preserve-3d; 
  transform-style: preserve-3d; 
}
<a class='replay' href='#' id='js-replay'>Modal</a> 
 
<div class='panel' id='js-panel'> 
  <div class='panel__content'> 
    <h4>Just Checking...</h4> 
    <h2>Delete your Account?</h2> 
    <p>This action is final and you will be unable to recover any data</p> 
  </div> 
  <div class='panel__flaps'> 
    <div class='flap outer flap--left'></div> 
    <a class='flap flap__btn' href='#'>YES</a> 
    <a class='flap flap__btn' href='#'>NO</a> 
    <div class='flap outer flap--right'></div> 
  </div> 
</div>

modal открывается сразу без клика, мне нужен открылось после клика на button. Заранее спасибо

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style> 
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); 
.panel { 
  background: rgba(0, 0, 0, 0.3); 
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3); 
  border-radius: 25px; 
  transition: 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53); 
  -webkit-transform: rotateX(-90deg); 
          transform: rotateX(-90deg); 
} 
.panel.is--open { 
  -webkit-transform: rotateX(0deg); 
          transform: rotateX(0deg); 
} 
 
.panel__content { 
  padding-bottom: 4em; 
  background: #fff; 
  border-top-left-radius: 25px; 
  border-top-right-radius: 25px; 
  color: #5a5a5a; 
  text-align: center; 
} 
.panel__content h4 { 
  padding: 1.5em 0; 
  border-bottom: 2px solid #ededed; 
  color: pink; 
  font-size: 1.15em; 
  font-weight: 700; 
  text-transform: uppercase; 
} 
.panel__content h2 { 
  padding: .5em 1.5em; 
  font-size: 3em; 
  font-weight: 300; 
} 
.panel__content p { 
  margin: auto; 
  width: 55%; 
  font-size: 1.15em; 
  font-weight: 300; 
  line-height: 1.4; 
} 
 
.panel__flaps { 
  display: flex; 
  -webkit-perspective: 1000px; 
          perspective: 1000px; 
  -webkit-transform-style: preserve-3d; 
          transform-style: preserve-3d; 
} 
 
.flap { 
  height: 100px; 
  background: #865fdf; 
} 
 
.flap__btn { 
  width: calc((100% - 212px) / 2); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
  background: #8f69e8; 
  color: white; 
  cursor: pointer; 
  font-size: 2.25em; 
  font-weight: 700; 
  text-decoration: none; 
  z-index: 1; 
  transition: .2s ease; 
  -webkit-transform: translate3d(0, 0, 0); 
          transform: translate3d(0, 0, 0); 
  -webkit-transform-origin: top center; 
          transform-origin: top center; 
} 
.flap__btn:hover, .flap__btn:focus { 
  background: #865fdf; 
  outline: none; 
  -webkit-transform: rotateX(-25deg) translate3d(0, 0, 0); 
          transform: rotateX(-25deg) translate3d(0, 0, 0); 
} 
 
.outer { 
  width: 106px; 
} 
 
.flap--left { 
  border-bottom-left-radius: 25px; 
  -webkit-transform-origin: top right; 
          transform-origin: top right; 
} 
 
.flap--right { 
  border-bottom-right-radius: 25px; 
  -webkit-transform-origin: top left; 
          transform-origin: top left; 
} 
 
.is--open .outer { 
  -webkit-animation: swing 1.5s .2s ease; 
          animation: swing 1.5s .2s ease; 
} 
.is--open .flap__btn:first-of-type { 
  -webkit-animation: swing 1.5s .3s ease; 
          animation: swing 1.5s .3s ease; 
} 
.is--open .flap__btn:last-of-type { 
  -webkit-animation: swing 1.5s .4s ease; 
          animation: swing 1.5s .4s ease; 
} 
 
@-webkit-keyframes swing { 
  10% { 
    -webkit-transform: rotateX(25deg); 
            transform: rotateX(25deg); 
  } 
  50% { 
    -webkit-transform: rotateX(-15deg); 
            transform: rotateX(-15deg); 
  } 
  75% { 
    -webkit-transform: rotateX(5deg); 
            transform: rotateX(5deg); 
  } 
  90% { 
    -webkit-transform: rotateX(-2.5deg); 
            transform: rotateX(-2.5deg); 
  } 
  100% { 
    -webkit-transform: rotateX(0deg); 
            transform: rotateX(0deg); 
  } 
} 
 
@keyframes swing { 
  10% { 
    -webkit-transform: rotateX(25deg); 
            transform: rotateX(25deg); 
  } 
  50% { 
    -webkit-transform: rotateX(-15deg); 
            transform: rotateX(-15deg); 
  } 
  75% { 
    -webkit-transform: rotateX(5deg); 
            transform: rotateX(5deg); 
  } 
  90% { 
    -webkit-transform: rotateX(-2.5deg); 
            transform: rotateX(-2.5deg); 
  } 
  100% { 
    -webkit-transform: rotateX(0deg); 
            transform: rotateX(0deg); 
  } 
} 
.replay { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  padding: .5em; 
  background: #865fdf; 
  border-radius: 3px; 
  color: white; 
  cursor: pointer; 
  opacity: 0; 
  pointer-events: none; 
  text-decoration: none; 
  transition: all .3s; 
  -webkit-transform: translate(-50%, -50%); 
          transform: translate(-50%, -50%); 
} 
.replay:hover, .replay:focus { 
  background: #8f69e8; 
  outline: none; 
  box-shadow: 0 0 25px #865fdf; 
} 
.replay:active { 
  -webkit-transform: translate(-50%, -50%) scale(0.9); 
          transform: translate(-50%, -50%) scale(0.9); 
} 
.replay.is--active { 
  opacity: 1; 
  pointer-events: initial; 
} 
 
*, *:before, *:after { 
  -webkit-font-smoothing: antialiased; 
  font-smoothing: antialiased; 
  text-rendering: optimizeLegibility; 
  box-sizing: border-box; 
} 
 
html, body { 
  height: 100%; 
} 
 
body { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: #2e2e2e; 
  font-family: "Lato", Arial, sans-serif; 
  -webkit-perspective: 1000px; 
          perspective: 1000px; 
  -webkit-transform-style: preserve-3d; 
          transform-style: preserve-3d; 
} 
 
</style> 
</head> 
<body> 
 
<button id="modalOpen">modalOpen</button> 
 
<a class='replay' href='#' id='js-replay'>Modal</a> 
 
<div  class='panel' id='js-panel'> 
  <div class='panel__content'> 
    <h4>Just Checking...</h4> 
    <h2>Delete your Account?</h2> 
    <p>This action is final and you will be unable to recover any data</p> 
  </div> 
  <div class='panel__flaps'> 
    <div class='flap outer flap--left'></div> 
    <a class='flap flap__btn' href='#'>YES</a> 
    <a class='flap flap__btn' href='#'>NO</a> 
    <div class='flap outer flap--right'></div> 
  </div> 
</div> 
 
 
 
<script> 
(function() { 
  // Variables 
  var panel     = document.getElementById("js-panel"); 
  var btns      = document.querySelectorAll(".flap__btn"); 
  var btnReplay = document.getElementById("js-replay"); 
 
  // On load, init panel 
  var init = function() { 
 
    panel.classList.add("is--open"); 
 
    // If btns are clicked, hide panel 
    // Show replay button     
    for (var i=0; i < btns.length; i++) { 
      btns[i].addEventListener("click", function() { 
        hidePanel(); 
      }); 
    } 
 
    function hidePanel() { 
      panel.classList.remove("is--open"); 
      btnReplay.classList.add("is--active"); 
    } 
 
    // When replay button is clicked, 
    // reset the stage. 
    btnReplay.addEventListener("click", function() { 
      resetStage(); 
    }); 
  } 
 
  // Hide the button and re-call init 
  function resetStage() { 
    btnReplay.classList.remove("is--active"); 
    init(); 
  } 
 
  // On load, call init function 
  $('#modalOpen').on('click', function(){ 
      init(); 
  }); 
})(); 
</script> 
 
</body> 
</html>

READ ALSO
Вывод документа в iframe
HTML

Вывод документа в iframe

Никак не получается вывести документв в html странице в iframeПытаюсь сделать так:

 228
Python парсинг html страницы
HTML

Python парсинг html страницы

Хочу спарсить авито, но когда получаю html выводит какую-то бурдуПодскажите что не так

 227
Записать переменную в кэш
HTML

Записать переменную в кэш

При клике на цифру, она увеличивется на 1(это функционал уже есть написан)При перезагрузке страницы, нужно сохранить значение, тоесть 101

 208
Как сделать так, чтобы зацикленное видео с youtube загружалось только 1 раз?
HTML

Как сделать так, чтобы зацикленное видео с youtube загружалось только 1 раз?

На страницу подключено Youtube видео через iframeВидео зацикливается, loop = 1

 220