всем хай, вот хочу поставить всплывающую подсказку о носом сообщении,
но тут загвоздка одна,

всплывающее окно срабатывает тогда когда только нажимаю на кнопку,
как ее можно активировать что бы подсказка срабатывала при входящем сообщении, код правильно написал, а вот что с кнопкой делать хз .

скину вам архив, кто сможет помочь? хотя бы подсказать, я пойму

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

 ?>

 

------
78457_vsplyvajushhieuvedomlenijacss.rar (34.2 Kb)
Скачиваний: 110

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

 

 }

 

а откуда мы получим информацию о новом сообщении?

Надо тянуть через вебсоккет либо JQ сначала, а потом уже вывод организовывать

ты немного не понял

это обычное всплывающее окно, условие всплывающего окна с помошью

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

 

мне не обязательно что бы сообщение приходило в реальном времени как в вк, а после обновлении страницы .

GooDLike, это обычное всплывающее окно, условие всплывающего окна с помошью

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

 

мне не обязательно что бы сообщение приходило в реальном времени как в вк, а после обновлении страницы .

ну вы поняли надеюсь, мне просто нужно что окно срабатывала не от кнопки

display: none;
убери

Обогнал

155876556, Вот. Вроде работает
------
78458_vsplyvajushhieuvedomlenijacss_1.zip (34.7 Kb)
Скачиваний: 117

RezzidenT, не проверенные решения - дело такое себе