Форум

zulyamodx · #1 (**permalink**) 07.10.2016, 07:12

Здравствуйте.
В интернете нашла скрипт jnotifier. Скрипт можете скачать в данном сообщении. Загрузила скрипт сюда.

Дело в том, что скрипт может открывать всплывающие уведомление при клике.

А мне необходимо чтобы скрипт автоматически по одному сообщению открывал всплывающие уведомления на сайте, и спустя 5-6 секунд автоматически уведомления сами закрывались.

Необходимо чтобы скрипт открывался не сразу при входе посетителя на сайт, а через 5 секунд.

Также очень важный момент. На сайте будут 30 уведомлений. В каждом разный текст. 30 всплывающих уведомлений должны автоматически выводиться по очереди и по одному с интервалом 9-10 секунд.
До появления очередного уведомления, открывшееся уведомление должно автоматически закрыться.

Вы можете помочь мне это реализовать? Очень надеюсь, что да. Спасибо.

рони · #2 (**permalink**) 07.10.2016, 08:18

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>

zulyamodx · #3 (**permalink**) 07.10.2016, 09:12

Рони, большое спасибо!
Хотела уточнить, если хочу вывести 30 таких автоматических уведомлений, то достаточно добавить таких блоков еще 27 раз? :
<div class="parent_popup" >
<div class="popup">
<h1>«Третье окно»</h1>
<p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p>
<p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" >X</a>
</div>
</div>
[/html]

рони · #4 (**permalink**) 07.10.2016, 09:42

zulyamodx,
да

zulyamodx · #5 (**permalink**) 07.10.2016, 16:39

Спасибо огромное! Вы помогли решить проблему, которую я не смогла найти за 2 дня. В интернете не нашла. Но в этом специализированном форуме помогли вы. Я очень признательна вам.

рони · #6 (**permalink**) 07.10.2016, 16:47

zulyamodx,

charikov · #7 (**permalink**) 12.02.2017, 22:44

рони,
А как сделать так чтобы при входе случайное сообщение показывало а не первое?
И чтобы они постоянно появлялись (в случайном порядке) не заканчиваясь?

рони · #8 (**permalink**) 12.02.2017, 23:18

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 запуском
});

skroliks · #9 (**permalink**) 28.09.2017, 14:29

Плюсую за отличные вопросы, и еще больше спасибо, за отличные ответы! А если немного усложнить задачку?

В общем как сделать чтобы не создавать вручную и не прописывать кучу окон, а сделать вывод через ajax чтобы выводилась заданная переменная в окне, а данные брались из php файла где будет скажем массив из которого в случайном порядке будет браться информация - чтобы выводило каждый раз новую инфу в окне без перезагрузки страницы? Это же реально? И если да - то что добавить надо? Заранее спасибо за ответ!

рони · #10 (**permalink**) 28.09.2017, 16:15

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>

Форум

Справочник

Discord чат

Курсы javascript