Вспливаюче вікно (Модальне вікно) для сайту на CSS

_{Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.} ^{6-05-2013, 03:28 1 831 0}

Ця техніка може застосовуватись якщо хочете заощадити місце на сайті. Форми підписки, реєстрації, авторизації - все це можна реалізувати в модальному вікні на CSS.

Це можуть бути і прості посилання в контенті сайту, а так само картинки, при натисканні на які відкривалося б вікно з тим вмістом, який ви хочете розмістити.

Розмір вікна можна змінювати через CSS, так що можна сміливо експериментувати.

 Автоматично вспливаюче вікно

Установка:
1. В файл style.css Вашого шаблону вставити:

.Window { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none;}
.Window:target { display: block; pointer-events: auto;}
.Window > div { width: 460px; position: relative; margin: 10% auto; padding: 30px 10px 10px; border-radius: 10px; background: #fff; box-shadow: 0px 0px 20px 2px;}
.close { background: #cc3300; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;}
.close:hover { background: #990000; }

2. В те місце де Ви хочите бачити кнопку "Код баннера" вставити:

<a href="#ModalOpen" title="">Відкрити вікно</a><div id="ModalOpen" class="Window"> <div> <a href="#close" title="Закрити" class="close">X</a> А тут можна вставляти будь-який вміст</div></div>

3. Замінити шляхи до малюнків на свої.

Автоматично вспливаюче вікно:

1. Підєднуємо css -

/* Вспливаюче вікно */    
#parent_popup {
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#popup {
  background: #fff;
    max-width: 520px;
    width: 100%;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border: 10px solid #ddd;
    position: relative;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#popup h1{
    font:28px Monotype Corsiva, Arial;
    font-weight: bold;
    text-align: center;
    color: #008000;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    }
#popup h2{
    font:24px Monotype Corsiva, Arial;      
    color: #008000;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    }
.close {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -24px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-family: helvetica, arial;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    top: -24px;
    width: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {background-color: rgba(255, 69, 0, 0.8);}

2. Підєднуємо скрипт: (де 1000 - це 1 секунда затримки після завантаження сторінки)

<script type="text/jаvascript">
    var delay_popup = 1000;
    setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>

3. Код самого вікна:

<div id="parent_popup">
  <div id="popup">
<img src="http://hotel-globus.com/malunku/baner-10rokiv.jpg" width="500" height="500" alt="10 років готелю Глобус" style="margin:10px; border:0; " />
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
  </div>
</div>

Коментарі