jnotifier - автоматические всплывающие уведомления на сайте
Вложений: 1
Здравствуйте.
В интернете нашла скрипт jnotifier. Скрипт можете скачать в данном сообщении. Загрузила скрипт сюда. Дело в том, что скрипт может открывать всплывающие уведомление при клике. А мне необходимо чтобы скрипт автоматически по одному сообщению открывал всплывающие уведомления на сайте, и спустя 5-6 секунд автоматически уведомления сами закрывались. Необходимо чтобы скрипт открывался не сразу при входе посетителя на сайт, а через 5 секунд. Также очень важный момент. На сайте будут 30 уведомлений. В каждом разный текст. 30 всплывающих уведомлений должны автоматически выводиться по очереди и по одному с интервалом 9-10 секунд. До появления очередного уведомления, открывшееся уведомление должно автоматически закрыться. Вы можете помочь мне это реализовать? Очень надеюсь, что да. Спасибо. |
Модальные окна открытие закрытие по таймеру или крестику
zulyamodx,
шифровка алексу из центра ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/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;
}
.parent_popup.show{
display: block;
}
.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);
}
</style>
</head>
<body>
<div class="parent_popup" >
<div class="popup">
<h1>«Всплывающее окно при загрузке сайта»</h1>
<p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p>
<p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" >X</a>
</div>
</div>
<div class="parent_popup" >
<div class="popup">
<h1>«Второе окно»</h1>
<p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p>
<p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" >X</a>
</div>
</div>
<div class="parent_popup" >
<div class="popup">
<h1>«Третье окно»</h1>
<p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p>
<p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" >X</a>
</div>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
function c() {
if (a = b.shift()) a.querySelector(".close").addEventListener("click", function(a) {
a.preventDefault();
d()
}), a.classList.add("show"), e = window.setTimeout(d, 5000) //время просмотра
}
function d() {
window.clearTimeout(e);
a && a.classList.remove("show");
window.setTimeout(c, 15000) //пауза между показами
}
var b = document.querySelectorAll(".parent_popup"),
e, a, b = [].slice.call(b, 0);
window.setTimeout(c, 5000) //пауза перед 1 запуском
});
</script>
</body>
</html>
|
Рони, большое спасибо!
Хотела уточнить, если хочу вывести 30 таких автоматических уведомлений, то достаточно добавить таких блоков еще 27 раз? : <div class="parent_popup" > <div class="popup"> <h1>«Третье окно»</h1> <p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p> <p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p> <a class="close"title="Закрыть" >X</a> </div> </div> [/html] |
zulyamodx,
да |
Спасибо огромное! Вы помогли решить проблему, которую я не смогла найти за 2 дня. В интернете не нашла. Но в этом специализированном форуме помогли вы. Я очень признательна вам.
|
zulyamodx,
:thanks: |
рони,
А как сделать так чтобы при входе случайное сообщение показывало а не первое? И чтобы они постоянно появлялись (в случайном порядке) не заканчиваясь? |
charikov,
подумайте хорошенько, прежде чем такое ставить.
window.addEventListener("DOMContentLoaded", function() {
function c() {
a = b[b.length * Math.random() | 0];
a.classList.add("show");
d = window.setTimeout(e, 5000) //время просмотра
}
function e() {
window.clearTimeout(d);
a && a.classList.remove("show");
window.setTimeout(c, 15000) //пауза между показами
}
document.addEventListener("click", function(a) {
((a = a.target.classList) && a.contains("parent_popup") || a.contains("close")) && e()
});
var b = document.querySelectorAll(".parent_popup"),
d, a, b = [].slice.call(b, 0);
window.setTimeout(c, 5000) //пауза перед 1 запуском
});
|
Плюсую за отличные вопросы, и еще больше спасибо, за отличные ответы! А если немного усложнить задачку? :)
В общем как сделать чтобы не создавать вручную и не прописывать кучу окон, а сделать вывод через ajax чтобы выводилась заданная переменная в окне, а данные брались из php файла где будет скажем массив из которого в случайном порядке будет браться информация - чтобы выводило каждый раз новую инфу в окне без перезагрузки страницы? Это же реально? И если да - то что добавить надо? Заранее спасибо за ответ! |
бесконечный запрос на сервер и вывод информации
skroliks,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
function a() {
$.get("https://randomuser.me/api/", function(a) {
var b = $("<img>", {
load: function() {
$("#new-projects").html(b).dialog("open")
}
});
b[0].src = a.results[0].picture.large
})
}
$("#new-projects").dialog({
autoOpen: !1,
close: function() {
window.setTimeout(a, 5E3)
}
});
a()
});
</script>
<div id="new-projects"></div>
</body>
</html>
|
Ээммм.. Что-то я не совсем понял что это.. А где отсыл на пхп файл с массивом откуда будут браться нужные данные?
И куда даже с Вашим кодом нужно вставить <div id="new-projects"></div> - во всплывающее окно? Я просто вставил и ничего - пустое окно вылазит.. :( |
Цитата:
Цитата:
|
Цитата:
Вот это <div id="new-projects"></div> - нужно вставить потом во всплывающее окно или надо между дивом переменную нужную еще вставить какая определяется в php файле? :) |
skroliks,
не понимаю вопросов, плагин dialog сделает любой элемент, всплывающим окном, содержимое окна будет тем, что вернёт сервер и сделает ваш шаблон, закрытие окна вызовет новый запрос на сервер, ответ откроет элемент ... и так без конца (пока есть ответы с сервера, по уму нужна обработка ошибок) |
| Часовой пояс GMT +3, время: 11:05. |