Показать сообщение отдельно
  #14 (permalink)  
Старый 06.01.2015, 19:07
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

От нечего делать набросал свой вариант с окошком.

http://learn.javascript.ru/play/X0G0c

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      .window {
          background: #FFF;
          border: 1px solid #DDD;
          border-radius: 10px;
          box-shadow: 0 0 15px #CCC;
          left: 0;
          height: 200px;
          margin: 0 auto;
          opacity: 0;
          position: fixed;
          right: 0;
          top: -200px;
          -webkit-transition: all 0.5s;
          -moz-transition: all 0.5s;
          -o-transition: all 0.5s;
          -ms-transition: all 0.5s;
          transition: all 0.5s;
          -webkit-transform: scale(0);
          -moz-transform: scale(0)
          -o-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0);
          visiblity: hidden;
          width: 300px;
      }
      .window button {
          background: #EEE;
          border: none;
          border-radius: 0 0 10px 10px;
          bottom: 0;
          color: #AAA;
          cursor: pointer;
          height: 25px;
          margin: 0;
          outline: none;
          position: absolute;
          width: 100%;
      }
      .window-show {
          opacity: 1;
          top: 20%;
          -webkit-transform: scale(1);
          -moz-transform: scale(1)
          -o-transform: scale(1);
          -ms-transform: scale(1);
          transform: scale(1);
          visibility: visible;
      }
    </style>
  </head>
  
  <body>
    <input onclick="showWindow(true)" type="button" value="Show Window">
    
    <div class="window">
      <button onclick="showWindow(false)">Close window</button>
    </div>

    <script type="text/javascript">
      var windowSelf = document.querySelector('.window');
      
      function showWindow(to) {
     	  windowSelf.classList.toggle('window-show', to);
      };
    </script>

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