Форум

alex72bel · #1 (**permalink**) 03.01.2016, 11:38

Доброго времени суток!! Всех с наступившим Новым годом!!!
Есть вот такие два скрипта.Помогите пожалуйста их соединить в один и чтобы был еще крестик для закрытия. Спасибо!!!

<script type="text/javascript">  setTimeout(function(){$('.web').fadeIn('fast')},10000)</script>
<script type="text/javascript"> setTimeout(function(){$('.web').fadeOut('fast')},25000)</script>

<div class="web" style="display: none;position:fixed;bottom:5px;right:10px;z-index: 999;"><img src="/iconka/svjaz_obratnaja.png"/></div>

рони · #2 (**permalink**) 03.01.2016, 14:46

alex72bel,
Как установить таймер на нужный обьект?

<!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 id="parent_popup" >
  <div id="popup">
<h1>«Всплывающее окно при загрузке сайта»</h1>
    <p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p>
    <p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p>
<a class="close"title="Закрыть" >X</a>
</div>
</div>
<script>
 window.addEventListener("DOMContentLoaded", function() {
     var d = document.querySelector("#parent_popup"),
         e = document.querySelector(".close");
     e.addEventListener("click", function(a) {
         a.preventDefault();
         d.classList.toggle("show");
     })
     window.setTimeout(function() {
     d.classList.toggle("show");
     window.setTimeout(function() {
     d.classList.contains("show") && d.classList.toggle("show")
},5000) //open
},5000) //pause
 });
</script>
</body>

</html>

alex72bel · #3 (**permalink**) 13.01.2016, 15:50

рони, Классно.. Спасибо. А как прикрутить к нему куки, чтобы он появлялся один раз в неделю .

рони · #4 (**permalink**) 13.01.2016, 16:12

alex72bel,
а почитать самому доку?
https://learn.javascript.ru/cookie

window.addEventListener("DOMContentLoaded", function() {
     var d = document.querySelector("#parent_popup"),
         e = document.querySelector(".close");
     e.addEventListener("click", function(a) {
         a.preventDefault();
         d.classList.toggle("show");
     })
     function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}
!getCookie('rem')  &&  window.setTimeout(function() {
     var date = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);
     document.cookie = "rem=yes; path=/; expires=" + date.toUTCString();
     d.classList.toggle("show");
     window.setTimeout(function() {
     d.classList.contains("show") && d.classList.toggle("show")
},5000) //open
},5000) //pause
 });

alex72bel · #5 (**permalink**) 13.01.2016, 19:29

рони, А я не шарю все-равно в скриптах ... )) Как-то пытался но все никак не дошло

alex72bel · #6 (**permalink**) 13.01.2016, 19:31

рони,А тут можете мне помочь? Добавить аудио файл

alex72bel · #7 (**permalink**) 13.01.2016, 19:43

рони, А если я скриты всплывающего окна размещу в отдельный файл, будет ли он работать? Просто у меня тестового сайта нет и негде проверить к сожалению??? Именно если положу его так

<script type="text/javascript" src="ссылка на скрипт"></script>

рони · #8 (**permalink**) 13.01.2016, 19:47

Сообщение от alex72bel

будет ли он работать?

да

alex72bel · #9 (**permalink**) 13.01.2016, 20:04

рони,Спасибо!!

alex72bel · #10 (**permalink**) 13.01.2016, 20:23

рони,Если я правильно понимаю, то сюда например, если поменять 7 на 14,то будет окно показываться один раз в две недели. А как сделать чтобы один раз в день? Поставить - 1 ???

var date = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);

Форум

Справочник

Discord чат

Курсы javascript