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


НОВОЕ


Зачем украинским детям учить точные науки?
Зачем украинским детям учить точные науки?
Байден снова намекнул о корупции в Украине, а Порошенко прогнулся под Трампа
Байден снова намекнул о корупции в Украине, а Порошенко прогнулся под Трампа
Жириновского ждут не простые времена в России
Жириновского ждут не простые времена в России
Украина сырьевой придаток мировой экономики: на примере металлургии
Украина сырьевой придаток мировой экономики: на примере металлургии
Статус женщин в Саудовской Аравии «повысили» до домашних животных
Статус женщин в Саудовской Аравии «повысили» до домашних животных
Мир в 2017 по версии  «The Economist» - победившего крыла глобалистов
Мир в 2017 по версии «The Economist» - победившего крыла глобалистов
Путин и агенты ФСБ? Разоблачаем!
Путин и агенты ФСБ? Разоблачаем!
2017 после Рождества - Ростислав Ищенко
2017 после Рождества - Ростислав Ищенко
Говорите громче, позируйте четче. Гугл все пишет
Говорите громче, позируйте четче. Гугл все пишет
Путин в своей речи не оправдал надежды «цивилизованного человечества»
Путин в своей речи не оправдал надежды «цивилизованного человечества»
Начат процесс по реорганизации Украины
Начат процесс по реорганизации Украины
Как Германский Кёльн стал столицей Марокко
Как Германский Кёльн стал столицей Марокко
Утилизаторы населения планеты
Утилизаторы населения планеты
Виктор Пинчук, враг Украины?
Виктор Пинчук, враг Украины?
8 мифов о земле и космосе, о которых Вы даже не догадываетесь!
8 мифов о земле и космосе, о которых Вы даже не догадываетесь!
Ударные вертолеты «истребители танков». Топ-10
Ударные вертолеты «истребители танков». Топ-10
Рабы капитализма или современное рабство
Рабы капитализма или современное рабство
Pages: 1 2 3 4 >>
Loading...

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

Loading...

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

Loading...