Форум

igrovik · #1 (**permalink**) 31.12.2015, 04:05

Доброго времени суток ув.Мастера ещё раз обращаюсь к вам за помощью!!!
Нашёл в сети такой вот код модального окна

<script type="text/javascript"> 
    var delay_popup = 5000; 
    setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup); 
</script>

<div id="parent_popup"> 
  <div id="popup"> 
<h1>«Всплывающее окно при загрузке сайта»</h1> 
    <p>Это пример простого модального окна, всплывающего при загрузке сайта, с эффектом затемнения фона и возможностью управления временем появления.</p> 
    <p>Его можно использовать с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма, форма регистрации или же форма обратной связи.</p> 
<a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a> 
</div> 
</div>

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);
}
Вопрос как сделать так что бы кнопка <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').s tyle.display='none';">X</a> появлялась примерно через 5 секунд

Уже пробывал и так

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

И так

<script type="text/javascript"> 
    var delay_popup = 5000; 
    setTimeout("document.getElementById('close').style.display='block'", delay_popup); 
</script>

не получается ничего!!!!!!!

Lemme · #2 (**permalink**) 31.12.2015, 09:32

https://learn.javascript.ru/settimeout-setinterval

Намекну:

// это не функция 
document.getElementById('close').style.display='block

рони · #3 (**permalink**) 31.12.2015, 09:50

igrovik,
строку 93 можно заменить на копию строки 91 тогда окно закроется само.

<!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, .close.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 {
 display: none;
 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() {
     e.classList.toggle("show")
},5000) //open
},5000) //pause
 });
</script>
</body>

</html>

igrovik · #4 (**permalink**) 31.12.2015, 14:15

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

https://learn.javascript.ru/settimeout-setinterval

Намекну:

// это не функция 
document.getElementById('close').style.display='block

Спасибо за ответ!!!!!!!!

igrovik · #5 (**permalink**) 31.12.2015, 14:22

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

igrovik,
строку 93 можно заменить на копию строки 91 тогда окно закроется само.

<!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, .close.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 {
 display: none;
 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() {
     e.classList.toggle("show")
},5000) //open
},5000) //pause
 });
</script>
</body>

</html>

Спасибо большое то что нужно:-)!!!
Да ещё с наступающим НГ!!!!!!!1

Форум

Справочник

Discord чат

Курсы javascript