Вспливаюче вікно (Модальне вікно) для сайту на CSS
Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 6-05-2013, 03:28 2 190 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>