<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: 5px 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: 10px;  
  -moz-border-radius: 10px;  
  border-radius: 10px;  
  }  

  .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>

<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) //интервал открытия окна  
},5000) //пауза появления крестика на удаление  
  });  
</script>