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
Сообщений: 6
Украина
44 дня назад
При обслуживании одного из сайтов столкнулся с задачей - нужно создать всплывающее окно при входе на сайт и что бы оно показывалось только один раз одному пользователю. Поделитесь инфой плиз
Администратор знающий
Ксенья Правдина
за вклад в развитие Портала Кубок Комментатора
Сообщений: 14
24 дня назад
объявление показывается одному человеку только один раз при первом заходе на веб-проект вне зависимости от страницы, на которую он попал (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
Киев
281 день назад
Ксенья Правдина:
объявление показывается одному человеку только один
все делается через скрипты, в нете поройтесь там все есть
Кто владеет информацией тот владеет миром!
|
Перейти на форум:



НОВОЕ


Саакашвили лишили гражданства Украины, обвинив в обмане и фальши
Саакашвили лишили гражданства Украины, обвинив в обмане и фальши
Нефть потекла вспять или очевидное невероятное
Нефть потекла вспять или очевидное невероятное
Трамп потребовал расследовать вмешательство Украины в выборы президента США (видео)
Трамп потребовал расследовать вмешательство Украины в выборы президента США (видео)
Человечеству осталось три спокойных года - Рето Кнутти
Человечеству осталось три спокойных года - Рето Кнутти
Один из директоров Google расписал будущее мира до 2099 года
Один из директоров Google расписал будущее мира до 2099 года
У Порошенко ответили на инициативу по созданию Малороссии
У Порошенко ответили на инициативу по созданию Малороссии
В самопровозглашенной ДНР заявили о переучреждение Украины в Малороссию
В самопровозглашенной ДНР заявили о переучреждение Украины в Малороссию
Два самых мощных и питательных растения на Земле
Два самых мощных и питательных растения на Земле
Если Вы утром пьете кофе - эта статья для Вас !
Если Вы утром пьете кофе - эта статья для Вас !
Саммит Украина-ЕС закончился ничем
Саммит Украина-ЕС закончился ничем
Мне б такого президента!
Мне б такого президента!
Путин попал в такой тупик, с каким еще не сталкивался - Михаил Хазин
Путин попал в такой тупик, с каким еще не сталкивался - Михаил Хазин
Гражданство России упростили для Украинцев и восстанавливают в границах Российской Империи
Гражданство России упростили для Украинцев и восстанавливают в границах Российской Империи
В Китае завершается строительство самого длинного в мире моста через море (фото)
В Китае завершается строительство самого длинного в мире моста через море (фото)
В Антарктиде откололся айсберг площадью 6000 кв. км. и весом триллион тонн
В Антарктиде откололся айсберг площадью 6000 кв. км. и весом триллион тонн
Pages: 1 2 3 4 >>

ЧИТАЙТЕ ТАКЖЕ:

Loading...

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

Loading...