» »

Появление окна при входе на сайт на CSS

Появление окна при входе на сайт на CSS

Простая функция, что заключается всплывающим окне при входе на сайт, который будет в себе нести ту или иную информацию пользователю. Думаю вы на многих интернет ресурсах замечали, где открывали страницу и появлялось сразу окно, в нем мог написан разный характер информации, но безусловно, все сделано для того, чтоб как можно больше прочли, это касается пользователей и также гостей.

Здесь разберем, как можно реализовать такую функцию на своем портале, где будут подключены стили и фон по всем сторонам будет размыт в прозрачно тесном фоне. Основном такой посыл состоит из заголовка, где ниже приведен текст и возможно поставлена ссылка на переход, где и находится основная статья или розыгрыш, все что качается сайта и не исключая рекламы.

В низ сайта, для того, чтоб на всех страницах был показ.

Код
<div id="parent_popup">
<div id="popup">
   
<p style="text-align: center;">Финансовый директор EA, Блейк Йоргенсен, имеет простое объяснение того, почему битпертрансляция Battlefront II, система с оплатой за выигрыш не удалась: LucasArts оставил EA без выбора, кроме как погубить свою игру, и игроки просто не получают ее.</p>
<p style="text-align: center;"><img align="absmiddle" border="0" src="https://image.prntscr.com/image/4S__mHCDSdG2x7YxygIALQ.png" /></p>
<p style="text-align: center;">Теперь вы можете купить право на подачу земельных претензий в Star Citizen, но системы базового здания и земельных претензий RSI обещают буквально еще не существовать.</p>

<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';"></a>
</div>
</div>
<script type="text/javascript">
var delay_popup = 5000;
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
</script>

CSS

Код
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 520px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Скругленные углы--*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8);
}

Также вы можете его сами отключить от показа, что предоставлена функция, виде кнопки.
03.12.2017 Просмотров: 347 Комментарий: (2)

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

Материал разместил

Комментарий: 2
Kosten
Kosten 03.12.2017 03:281
0
Здесь тема такая, что проверяя на тестовом сайте, и все работает, но оказалось, что при каждой открытой страницы будет появятся окно.

Кто знает, как можно исправить, видать нужно здесь функция js, или чтоб запоминала и раз в сутки показывало, это возможно сделать.
-SAM-
-SAM- 03.12.2017 05:112
0
Так по факту само окно без js не появиться вовсе, почему тогда материал подан как на CSS? И закрыть окно - тоже js нужно, что включенной его поддержка была в браузере. Просто, что сам код окна не прописан через js, ну а стили css используются полюбом - для внешнего вида. Что вопроса касается, то там нужно куки подключать (сам не подключал никогда), вот тема здесь.
avatar