Создание всплывающего окна над сайтом от push-up сервиса onesignal.

На некоторых новостных сайтах имеется необходимость в окнах, побуждающих людей подписаться на push-up уведомления в дополнение к стандартному уведомлению.

Рассмотрим такую задачу на примере уведомлений от onesignal com.

Сначала необходимо получить текущий статус.

Default – Разрешение или запрет еще не получено.
Granted – Разрешение получено.
Denied – Запрос отклонен.

Данные о разрешении хранятся здесь – Notification.permission.

Итак под тегом body необходимо вставить следующий html код:

<div class="hoverblock" id="hoverblock">
<div class="hoverinnertext" align="center">Для чтения новости нажмите "Разрешить"</div>
<div class="closebuthover" onclick="closebuthover()">×</div>
</div>

Добавляем стили css.

.hoverblock {
display:none;
width: 100%;
z-index: 100;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.8);
}
.hoverinnertext {
color: #fff;
right: 0;
bottom: 0;
left: 0;
z-index: 999997;
max-width: 360px;
margin: 26vh auto 10vh;
font-size: 25px;
padding: 20px 7px;
font-weight: 500;}
.closebuthover {
cursor:pointer;
position: absolute;
top: -9px;
right: 10px;
font-size: 54px;
color: #FFF;}

И в конце вставляем Javascript код в конце перед закрытием тега body.

<script> 
if(Notification.permission=='default')
{
document.getElementById('hoverblock').style.display='block';
}
</script>