Javascript-форум - Показать сообщение отдельно

Deff · #23 (**permalink**) 20.08.2012, 21:24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://myforum2.4adm.ru/storage/myforum2_4adm_ru/images/jQuery.js"></script>
<script type="text/javascript" src="http://myforum2.4adm.ru/storage/myforum2_4adm_ru/images/jquery.cookie.js"></script>

<style type="text/css">

div[id^="CocieBlock"] {
 text-align: center;
 padding:12px;
 margin:0 auto;
}

div[id^="CocieBlock"] *{
 margin:0;
 padding:0;
}

div[id^="CocieBlock"] .box {
 padding:12px;
 background-color:#C1C1C1;
}

div[id^="CocieBlock"] .close {
 line-height:3px;
 width:10px;
 height:10px;
 padding:5px 4px 4px 5px;
 float:right;
 margin-right:0px;
 cursor:pointer;
}

div[id^="CocieBlock"] section{
 font-size:17px;
 font-weight:700;
 padding:12px;
 max-width:360px;
 display:none;
}

.box{
 width:500px;
 font: normal normal 400 12px/18px Verdana;
}

.box section hr{
 height:3px;
 padding:0;
}

.tn-box-color-1 {
 max-width:360px;
 text-align: left;
 position:relative;
 background:#FEE791 url(http://s1.uploads.ru/i/MYmFD.png) 12px 50% no-repeat;
 padding:20px 85px 22px 65px!important;
}
.tn-box-color-1 hr{
 position:absolute;
 width:90%;
 margin-top:13px!important;
 left:5%;
 border:#FDFBFD solid 2px;
}
</style>

<script type="text/JavaScript">
$(document).ready(function (){

var boxN={box1:7,box2:14,box3:20};

for(var key in boxN){

  if($.cookie(key)!=null){
    var id = key.replace('box','')
    $('#CocieBlock'+id).remove();
  }
}


$('.close').click(function() {
$(this).parent().slideUp(800, function() {
  var Zr1=$(this).parents('div[id^="CocieBlock"]').find('section');
     Zr1.slideDown(800,function() {
     setTimeout(function() {Zr1.fadeOut(2300)},1500) //.slideUp(2300)",1500) 
     });
  });
  var id=$(this).parents('div[id^="CocieBlock"]').attr("id").replace("CocieBlock","");
  //alert(boxN['box'+id])

  $.cookie('box'+id,'none',{ expires: parseInt(boxN['box'+id]) }); //Временно закомментировал для тестов
});
});
</script>
</head>

<body>


<div id="CocieBlock1" class="container">   
 
  <div class="box" id="box1" >
      <div class="close">x</div>
 При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
 </div>
      <section>
             
                <div class="tn-box tn-box-color-1">
                    <p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
                    <div class="tn-progress"></div>
                </div>
      </section>

</div>


<div id="CocieBlock2" class="container">   
 
  <div class="box" id="box2" >
      <div class="close">x</div>
 При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
 </div>
      <section>
             
                <div class="tn-box tn-box-color-1">
                    <p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
                    <div class="tn-progress"></div>
                </div>
      </section>

</div>

<div id="CocieBlock3" class="container">   
 
  <div class="box" id="box3" >
      <div class="close">x</div>
 При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
 </div>
      <section>
             
                <div class="tn-box tn-box-color-1">
                    <p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
                    <div class="tn-progress"></div>
                </div>
      </section>

</div>



</body>
</html>

Cледущий Вариант только за плюшки!