Тема: focus на div
Показать сообщение отдельно
  #9 (permalink)  
Старый 16.06.2015, 05:48
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Вариант:
<!DOCTYPE>
<html>
<head>

<style>
.cover {
 color:red;
 position:relative;
 border-radius:5px;
 border:red solid 1px;
 width:200px;
 height:145px;
 margin:23px;
}
.one-div {
 position:absolute;
 display:none;
 left:0;right:0;
 top:0;bottom:0;
 width:50%;
 height:40%;
 margin:auto;
 padding:8px;
 color:#000;
 border-radius:5px;
 border:#000 solid 1px;
 text-align:center;
}

b[title="Закрыть"]{
  cursor:pointer;
  float:right;
  padding:2px 4px;
  color:red;
}
</style>


<script type="text/javascript" src="http://yandex.st/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('.cover').click(function(){
      $(this).find('.one-div').toggle();
   });
   $('.one-div').click(function(){return false});
   $('.one-div>b[title="Закрыть"]').click(function(){
      $(this).parents('.cover').click();
   });
});
</script>
</head>
<body>

<div class='cover'>
<div class='one-div'><b title="Закрыть">X</b>Привет</div>
</div>
<div class='cover'>
<div class='one-div'><b title="Закрыть">X</b>Пока</div>
</div>

</body>
</html>
Ответить с цитированием