Приветствую! Помогите чайнику!
Имеется всплывающее окно которое автоматически появляется при входе на сайт. Как сделать так, чтоб была возможность открывать данное окошко еще и нажатием на определенную ссылку на странице?
Как в таком случае должен выглядеть <a href=...
Заранее благодарствую за ответ!
Ниже скрипт окошка:
<style>
#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: "\26a0 \20 \20";
color: red;
font-size: 150%;
vertical-align: middle;
}
#popup div {
border-width: 0 4px 4px 4px;
border-radius: 0 0 5px 5px;
}
</style>
<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='no ne';
localStorage.setItem('popup1', 'none');
}
}
if(localStorage.getItem('popup1')) {
document.getElementById('popup').style.display='no ne';
}
</script>