Главная » Шпаргалка » PHP MYSQL javascript » jQuery » модальные окона

Привлеки внимание посетителей с помощью модальных окон

Привлеки внимание посетителей с помощью модальных окон

В этом уроке Вы узнаете как сделать модальное окно, которое точно привлечет внимание любого посетителя.

С самого начала документа подключаем фреймворк и функцию::

<script type="text/javascript" src="jquery.tools.min.js"></script>
      <script type="text/javascript">
      $(function() {    
$("#alert").overlay({
      finish: {top: 'center'},
      expose: '#951756'
});
});
      </script>

Далее подключаем стили оформления. В данном примере я использовал и внешнюю таблицу стилей и внутренние стили. Можете их объединить в одном месте, если желаете.

<link rel="stylesheet" type="text/css" href="overlay-minimal.css"/>
<style>
      body {
      padding:150px 50px;
      font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
      }
      #alert {
      width:300px;
      height:220px;
      }
#alert div.close {

      top:0;
      right:0;
      }
#alert h2 {
      background-image:url(alert.png);
      background-position:6px center;
      background-repeat:no-repeat;
      padding:10px 0 10px 60px;
      margin-top:-10px;
      }
  </style>

В коде присутствуют пути к картинкам, так что если будете их переносить - не забывайти про пути.

В теле документа создаем кнопку, которая вызывает модальное окно. Содержимое окна также прописываем здесь.

<button type="button" onClick='$("#alert").overlay().load();'>Open alert</button>
<!-- our alert box -->
      <div class="overlay" id="alert">
 <h2>A nasty alert box.</h2>
 <p>

      Class aptent taciti sociosqu ad litora torquent per conubia nostra,
      per inceptos himenaeos. Donec lorem ligula, elementum vitae,
      imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
  </p>
</div>