Показать сообщение отдельно
  #5 (permalink)  
Старый 17.11.2016, 16:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Njeee,
<!DOCTYPE html><html class=''>
<head>
  <meta charset="utf-8">
<style class="cp-pen-styles">.box.show {  visibility: visible; opacity: 1; }
.box{
  background-color: green;
  display: inline-block;
  left: 50%;
  opacity: 0;
  padding: 15px;
  width: 300px;
  height: 323px;
  position: fixed;
  text-align: justify;
  top: 40%;
  visibility: hidden;
  z-index: 999999;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: opacity .5s, top .5s;
  -moz-transition: opacity .5s, top .5s;
  -ms-transition: opacity .5s, top .5s;
  -o-transition: opacity .5s, top .5s;
  transition: opacity .5s, top .5s;
  border-radius: 11px;
}</style></head><body>

<html><head>

  <script>
    function init() {
        var form = document.querySelectorAll('.box'),
            tel = document.querySelectorAll('.openbox'),
            open;
        document.onclick = function(event) {
            var elem = event.target;
                if (elem.classList.contains('openbox')) {
                for (var i = 0; i < tel.length; i++) {
                    if (elem === tel[i]) form[i].classList.toggle("show")
                    else form[i].classList.remove("show")
                }

                return false;
            }

        }
    }
    window.onload = init;
  </script>

</head>
<body>

<div class="mainbar">
  <div class="box">
    <h2>TEST1</h2>
    <p>Текст№1</p>
  </div>
  <div class="box">
    <h2>TEST2</h2>
    <p>Текст№2</p>
  </div>
  <div class="box">
    <h2>TEST3</h2>
    <p>Текст№3</p>
  </div>
</div>


<a href="#" class="openbox">test 1</a>
<a href="#" class="openbox">test 2</a>
<a href="#" class="openbox">test 3</a>

</body>
</html>

</body></html>
Ответить с цитированием