#popup {
  display: table;
  position: fixed; top: 0; left: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  background: rgba(240,240,240,.7);
  visibility: hidden;
  animation: animaciya 1s 9s forwards; /* 8s - это количество секунд по истечении которых появляется сообщение */ 
  cursor: pointer;
}
@keyframes animaciya {   
  from {visibility: hidden;}  
  to {visibility: visible;} 
}
#popup figure {
  display: table-cell;
  vertical-align: middle;
}
#popup div, #popup figcaption, #popup figure:before {
  max-width: 500px; /* максимальная ширина */ 
  margin: 0 auto;
  border-style: solid; 
  border-color: rgb(88,125,164);
  background: #fff;
}
#popup figure:before { /* стиль кнопки "закрыть" */ 
  content: "закрыть";
  display: block;
  padding: 0 1%;
  border-width: 4px 4px 0 4px;
  border-radius: 5px 5px 0 0;
  text-align: right;
  color: rgb(88,125,164);
}
#popup div, #popup figcaption {
  padding: 1%;
  cursor: default;
}
#popup figcaption {
  position: relative;
  border-width: 0 4px 0 4px;
  font-size: 150%;
  text-transform: uppercase;
  color: rgb(100,100,100);
}
#popup figcaption:before { /* стиль восклицательного знака, не поддерживается Google Chrome. Его можно заменить на что-то более приемлемое */ 
  content: "\26a0 \20 \20";
  color: red;
  font-size: 150%;
  vertical-align: middle;
}
#popup div {
  border-width: 0 4px 4px 4px;
  border-radius: 0 0 5px 5px;
}