1info.net - Статьи Интересные Новости Информация Онлайн
1info.net в Facebook  1info.net в Google+  1info.net в VK  1info.net на Oдноклассниках  1info.net в Twitter  1info.net на youtube  1info.net RSS  1info.net RSS video 
Авторам Обратная связь Регистрация Поиск

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

Создание и верстка сайтов, "примочки"
бывалый
Гражданин
за вклад в развитие Портала За помощь в наполнении и развитие портала 1info.net
Сообщений: 7
Украина
35 дней назад
При обслуживании одного из сайтов столкнулся с задачей - нужно создать всплывающее окно при входе на сайт и что бы оно показывалось только один раз одному пользователю. Поделитесь инфой плиз
Администратор эксперт
Ксенья Правдина
за вклад в развитие Портала Кубок Комментатора
Сообщений: 20
2 часа назад
объявление показывается одному человеку только один раз при первом заходе на веб-проект вне зависимости от страницы, на которую он попал (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
Киев
105 дней назад
Ксенья Правдина:
объявление показывается одному человеку только один
все делается через скрипты, в нете поройтесь там все есть
Кто владеет информацией тот владеет миром!
|
Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.


НОВОЕ


Откуда пришло радиоактивное облако в Норвегию, Германию, Польшу и Прибалтику?
Откуда пришло радиоактивное облако в Норвегию, Германию, Польшу и Прибалтику?
Подпевала Янукович
Подпевала Янукович
Фирташ взят под стражу в Австрии для экстрадиции
Фирташ взят под стражу в Австрии для экстрадиции
NASA собирает экстренную пресс-конференцию - обещают фантастическую новость!
NASA собирает экстренную пресс-конференцию - обещают фантастическую новость!
Шестеро Российских дипломатов погибли за два месяца
Шестеро Российских дипломатов погибли за два месяца
Умер постпред России при ООН Виталий Чуркин
Умер постпред России при ООН Виталий Чуркин
Трамп хотел продать Путину Украину и получил ответ: «Ищите лохов в другом месте»
Трамп хотел продать Путину Украину и получил ответ: «Ищите лохов в другом месте»
9 знаменитостей, которые ведут двойную жизнь
9 знаменитостей, которые ведут двойную жизнь
Нетаньяху и Трамп приступили к созданию «Великого Израиля»
Нетаньяху и Трамп приступили к созданию «Великого Израиля»
Дамба Оровилл - США необходима трагедия
Дамба Оровилл - США необходима трагедия
Без тепла и света: нехватка угля в Украине может вызвать электро отключения
Без тепла и света: нехватка угля в Украине может вызвать электро отключения
Россияне научились обыгрывать казино. Wired Magazine - США
Россияне научились обыгрывать казино. Wired Magazine - США
За что идет война в Донбассе. Ничего личного только бизнес
За что идет война в Донбассе. Ничего личного только бизнес
Убит Гиви - командира Сомали подорвали. Первое видео, фото
Убит Гиви - командира Сомали подорвали. Первое видео, фото
Украина не войдет в Европу, если продолжит восхвалять Бандеру - Качинский
Украина не войдет в Европу, если продолжит восхвалять Бандеру - Качинский
Pages: 1 2 3 4 >>
Loading...

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

Loading...