<div class='cont'> <input type="checkbox" class="look-btn" /> <!-- надо как то сделать что бы  всплывающее уведомление появлялось при входящем сообщении -->  <button class="look">Смотреть</button>   <!--кнопка активации уведомления,-->  <? if ($k_new!=0 && $k_new_fav==0){  echo '<section>'; echo '<div class="notif notif-color-3">'; echo '<p>У Вас 1 новое сообщение.<p>';  ////тут смс  echo '<div class="notif-progress"></div>'; echo '</div>'; echo '</section>'; }  </div> ?>   

   .cont {  width: 100%; position: relative; margin-top: 5%; min-height: 600px; text-align: center;  }   button.look {  color: #fff; display: inline-block; margin: 5px auto 35px auto; border: 0; border-radius: 6px; padding: 0px 15px; height: 40px; width: 200px; font-family: Geneva, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 15px; background: #F89406;  }   input.look-btn:hover + button.look{ background: #D35400;  }   input.look-btn:checked + button.look{ background: #9B59B6;  }   input.look-btn {  width: 210px; position: absolute; left: 48%; margin-left: -80px; height: 40px; cursor: pointer; opacity: 0; z-index: 100;  }   /* Задаем стиль уведомлений: */   .notif {   width: 280px;  position: relative;  margin: 0 auto 25px auto;  padding: 30px 20px;  text-align: left;  border-radius: 12px;  opacity: 0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);   cursor: default;  display: none;  }   .notif p {  text-align: left;  font-weight: bold;  font-size: 16px;  margin: 0;  }   .notif p:before {   text-align: center;  border: 3px solid rgba(255, 255, 255, 1);  margin-top: -18px;  top: 50%;  right: 25px;  width: 30px;  content: '!';  font-size: 30px;  color: rgba(255, 255, 255, 1);  position: absolute;  height: 30px;  line-height: 30px;  border-radius: 50%;  }   .notif-progress {  width: 0;  height: 10px;  background: rgba(255,255,255,0.5);  position: absolute;  bottom: 5px;  left: 3%;  border-radius: 12px;  }   /* Устанавливаем цвета всплывающих уведомлений: */   .notif-color-1 {   background: #F89406;  }   .notif-color-1 p {  color: #FFF;  }   .notif-color-2 {   background: #59ABE3;  }   .notif-color-2 p {  color: #FFF;  }   .notif-color-3{  background: #00B16A;  }   .notif-color-3 p {  color: #FFF;  }   /* Анимация: */   input.look-btn:checked ~ section .notif {   display: block;  -webkit-animation: fadeOut 3s linear forwards;  -moz-animation: fadeOut 3s linear forwards;  -o-animation: fadeOut 3s linear forwards;  -ms-animation: fadeOut 3s linear forwards;  animation: fadeOut 3s linear forwards;  }   input.look-btn:checked ~ section .notif .notif-progress {  -webkit-animation: runProgress 2s linear forwards 0.7s;  -moz-animation: runProgress 2s linear forwards 0.7s;  -o-animation: runProgress 2s linear forwards 0.7s;  -ms-animation: runProgress 2s linear forwards 0.7s;  animation: runProgress 2s linear forwards 0.7s;  }   @-webkit-keyframes fadeOut {  0% { opacity: 0; }  10% { opacity: 1; }  90% { opacity: 1; -webkit-transform: translateY(0px);}  99% { opacity: 0; -webkit-transform: translateY(-25px);}  100% { opacity: 0; }  }   @-moz-keyframes fadeOut {  0% { opacity: 0; }  10% { opacity: 1; }  90% { opacity: 1; -moz-transform: translateY(0px);}  99% { opacity: 0; -moz-transform: translateY(-25px);}  100% { opacity: 0; }  }   @-o-keyframes fadeOut {  0% { opacity: 0; }  10% { opacity: 1; }  90% { opacity: 1; -o-transform: translateY(0px);}  99% { opacity: 0; -o-transform: translateY(-25px);}  100% { opacity: 0; }  }   @-ms-keyframes fadeOut {  0% { opacity: 0; }  10% { opacity: 1; }  90% { opacity: 1; -ms-transform: translateY(0px);}  99% { opacity: 0; -ms-transform: translateY(-25px);}  100% { opacity: 0; }  }   @keyframes fadeOut {  0% { opacity: 0; }  10% { opacity: 1; }  90% { opacity: 1; transform: translateY(0px);}  99% { opacity: 0; transform: translateY(-25px);}  100% { opacity: 0; }  }   @-webkit-keyframes runProgress {  0%{ width: 0%; }  100%{ width: 94%; }  }   @-moz-keyframes runProgress {  0%{ width: 0%; }  100%{ width: 94%; }  }   @-o-keyframes runProgress {  0%{ width: 0%; }  100%{ width: 94%; }  }   @-ms-keyframes runProgress {  0%{ width: 0%; }  100%{ width: 94%; }  }   @keyframes runProgress {  0%{ width: 0%; }  100%{ width: 94%; }  }   /* Варианты анимации для 2 и 3 уведомления: */   input.look-btn:checked ~ section .notif:nth-child(2) {  -webkit-animation-duration: 4s;  -moz-animation-duration: 4s;  -o-animation-duration: 4s;  -ms-animation-duration: 4s;  animation-duration: 4s;    -webkit-animation-delay: 0.2s;  -moz-animation-delay: 0.2s;  -o-animation-delay: 0.2s;  -ms-animation-delay: 0.2s;  animation-delay: 0.2s;  }   input.look-btn:checked ~ section .notif:nth-child(2) .notif-progress {  -webkit-animation-duration: 3s;  -moz-animation-duration: 3s;  -o-animation-duration: 3s;  -ms-animation-duration: 3s;  animation-duration: 3s;    -webkit-animation-delay: 0.7s;  -moz-animation-delay: 0.7s;  -o-animation-delay: 0.7s;  -ms-animation-delay: 0.7s;  animation-delay: 0.7s;  }   input.look-btn:checked ~ section .notif:nth-child(3) {  -webkit-animation-duration: 9s;  -moz-animation-duration: 9s;  -o-animation-duration: 9s;  -ms-animation-duration: 9s;  animation-duration: 9s;    -webkit-animation-delay: 0.4s;  -moz-animation-delay: 0.4s;  -o-animation-delay: 0.4s;  -ms-animation-delay: 0.4s;  animation-delay: 0.4s;  }   input.look-btn:checked ~ section .notif:nth-child(3) .notif-progress {  -webkit-animation-duration: 7.5s;  -moz-animation-duration: 7.5s;  -o-animation-duration: 7.5s;  -ms-animation-duration: 7.5s;  animation-duration: 7.5s;    -webkit-animation-delay: 0.9s;  -moz-animation-delay: 0.9s;  -o-animation-delay: 0.9s;  -ms-animation-delay: 0.9s;  animation-delay: 0.9s;  }   

   if ($k_new!=0 && $k_new_fav==0){ тут высвечивается ссылка на входящее сообщение}   

   if ($k_new!=0 && $k_new_fav==0){ <div стиль окна><a href='ccылка'>текст</a>