1info.net - Интересное Новости Информация Статьи Онлайн    

Подписывайтесь в Социальных  Сетях: 

 

 
Найти на сайте:

Веб дизайн, програмирование.....

Создание и верстка сайтов, "примочки"
Администратор бывалый
Повальний
за вклад в развитие Портала За помощь в наполнении и развитие портала 1info.net
Сообщений: 7
Украина
157 дней назад
При обслуживании одного из сайтов столкнулся с задачей - нужно создать всплывающее окно при входе на сайт и что бы оно показывалось только один раз одному пользователю. Поделитесь инфой плиз
Администратор эксперт
Ксенья Правдина
за вклад в развитие Портала Кубок Комментатора
Сообщений: 20
6 часов назад
объявление показывается одному человеку только один раз при первом заходе на веб-проект вне зависимости от страницы, на которую он попал (JavaScript),
минимум анимации, послание появляется спустя какое-то время нахождения человека на странице (CSS),
простое закрытие: активное "затемнённое" поле, заметный крестик, действие кнопки Esc.
Рассмотрим создание именно такого простого, но симпатичного и "резинового", всплывающего окна на HTML5.

Вставляем в файл стилей CSS:

#popup {
display: table;
position: fixed; top: 0; left: 0;
z-index: 100;
height: 100%;
width: 100%;
background: rgba(240,240,240,.9);
visibility: hidden;
animation: animaciya 1s 5s forwards; /* 5s - это количество секунд по истечении которых появляется сообщение */
cursor: pointer;
}
@keyframes animaciya {
from {visibility: hidden;}
to {visibility: visible;}
}
#popup figure {
display: table-cell;
vertical-align: middle;
}
#popup div, #popup figcaption, #popup figure:before {
max-width: 500px; /* максимальная ширина */
margin: 0 auto;
border-style: solid;
border-color: rgb(88,125,164);
background: #fff;
}
#popup figure:before { /* стиль кнопки "закрыть" */
content: "закрыть";
display: block;
padding: 0 1%;
border-width: 4px 4px 0 4px;
border-radius: 5px 5px 0 0;
text-align: right;
color: rgb(88,125,164);
}
#popup div, #popup figcaption {
padding: 1%;
cursor: default;
}
#popup figcaption {
position: relative;
border-width: 0 4px 0 4px;
font-size: 150%;
text-transform: uppercase;
color: rgb(100,100,100);
}
#popup figcaption:before { /* стиль восклицательного знака, не поддерживается Google Chrome. Его можно заменить на что-то более приемлемое */
content: "a0  ";
color: red;
font-size: 150%;
vertical-align: middle;
}
#popup div {
border-width: 0 4px 4px 4px;
border-radius: 0 0 5px 5px;
}


Вставляем в шаблон сайта, желательно перед закрівающимся тегом </body>


<div id="popup">
<figure>
<figcaption>заголовок</figcaption>
<div>содержание</div>
</figure>
</div>

<script>
window.onkeyup = okno; // нажатие Esc, см. условие "e.keyCode==27"
document.getElementById('popup').onclick = okno;

function okno(e) {
if (e.target.nodeName != 'DIV' && e.target.nodeName != 'FIGCAPTION' || e.keyCode==27) { // через && перечисляются теги, клинкув на которые окно не будет закрыто; сюда же можно включить тег A или IFRAME
document.getElementById('popup').style.display='none';
localStorage.setItem('popup1', 'none');
}
}

if(localStorage.getItem('popup1')) {
document.getElementById('popup').style.display='none';
}
</script>


Смотрим у себя на сайте, что получилось и соответственно правим стили (:
Все! Дорогие друзья. Если вы сделаете все правильно, то получите в свое распоряжение всплывающее окно при загрузке сайта, с возможностью управления временем появления. Как вы воспользуетесь этой техникой исполнения, зависит только от вас. Но упаси вас бог, размещать в таких окнах разного рода «шнягу-шняжную» и уж тем более блокировать возможность закрытия окна.
Уважайте своих пользователей и они к вам потянутся.
Редактировалось: 1 раз (Последний: 20 сентября 2013 в 01:27)
бывалый
Vrum
Сообщений: 7
Киев
21 день назад
Ксенья Правдина:
объявление показывается одному человеку только один
все делается через скрипты, в нете поройтесь там все есть
Кто владеет информацией тот владеет миром!
|
Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.


НОВОЕ

Loading...

НОВОСТИ ПАРТНЕРОВ

Loading...

ИНТЕРЕСНОЕ

НОВОСТИ ИЗ СЕТИ

Loading...