html pop up (только на CSS)

щелчок
Заголовок

Здесь может располагаться текст, который легко выделяется левой клавишей мышки.

<style style="text-align: left;">
  label {position: relative;}

  .box {
   position: absolute;
   left: 0;
   top: 100%;
   z-index: 100;
   text-indent: 0px;   

   /* Prevent some white flashing in Safari 5.1 */
   -webkit-backface-visibility: hidden;
   
   background-color: #eeeeee;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999)); 
   background-image: -webkit-linear-gradient(top, #eeeeee, #999999); 
   background-image:    -moz-linear-gradient(top, #eeeeee, #999999); 
   background-image:     -ms-linear-gradient(top, #eeeeee, #999999); 
   background-image:      -o-linear-gradient(top, #eeeeee, #999999); 
       
   -moz-border-radius:    20px; 
   -webkit-border-radius: 20px; 
   border-radius:         20px; 
     
   -moz-background-clip:    padding; 
   -webkit-background-clip: padding-box; 
   background-clip:         padding-box; 
   
   width: auto; 
   padding: 20px;
   margin: 24px 0;
   opacity: 0;
         
   -webkit-transform: scale(0) skew(50deg);
   -moz-transform:    scale(0) skew(50deg);
   -ms-transform:     scale(0) skew(50deg);
   -o-transform:      scale(0) skew(50deg);
   
   -webkit-transform-origin: 0px -30px;
   -moz-transform-origin:    0px -30px;
   -ms-transform-origin:     0px -30px;
   -o-transform-origin:      0px -30px;
   
   -webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
   -moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s;
   -ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s;
   -o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;
  }
  
  .box:after {
   content: "";
   position: absolute;
   bottom: 100%;
   left: 30px;
   border-bottom: 20px solid #eee;
   border-left:   14px solid transparent;
   border-right:  14px solid transparent;
   width:  0;
   height: 0;
  }
  
  .popUpControl:checked ~ label > .box {
   opacity: 1;
   -webkit-transform: scale(1) skew(0deg);
   -moz-transform:    scale(1) skew(0deg);
   -ms-transform:     scale(1) skew(0deg);
   -o-transform:      scale(1) skew(0deg);
  }
  .popUpControl { 
    display: none; 
  }
  
  .popUpControl:checked ~ label > span.click1 {display: none;}
  .popUpControl:checked ~ label:before {content: "смена текста";} 
  
  .title { display: block; margin: 0 0 5px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; text-align: center;}
  
  .click {
   text-indent: 0px;
   display: inline-block;
   padding: 3px 15px;
   -webkit-border-radius: 18px;
   -moz-border-radius:    18px;
   border-radius:         18px;
   font: 12px "Lucida Grande", Sans-Serif;
   background-color: #b6d3f4;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#b6d3f4), to(#5483b8)) !important; 
   background-image: -webkit-linear-gradient(top, #b6d3f4, #5483b8) !important; 
   background-image:    -moz-linear-gradient(top, #b6d3f4, #5483b8) !important; 
   background-image:     -ms-linear-gradient(top, #b6d3f4, #5483b8) !important; 
   background-image:      -o-linear-gradient(top, #b6d3f4, #5483b8) !important; 
   color: white !important;
   box-shadow: inset 0 1px 1px white,
                     0 3px 3px rgba(0,0,0,0.6);
   border: 1px solid #9ac9ff !important;
   font-weight: 600;
   text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
   text-decoration: none;
   margin: 0;
   position: relative;
 }
 
 .click:hover {
   box-shadow: inset 0 2px 6px white,
                     0 3px 3px rgba(0,0,0,0.6);
 }
 
 .click:active {
   box-shadow: inset 0 2px 6px white,
                     0 1px 1px rgba(0,0,0,0.6);
   top: 2px;
 }
 
</style>
<input class="popUpControl" id="linkie" type="checkbox" /><label for="linkie" class="click"><span class="click1">щелчок</span>
<span class="box"><span class="title">Заголовок</span>
<img border="0" height="203" width="249" src="http://1.bp.blogspot.com/-Xw7otjazXqk/Tm39EEXp0yI/AAAAAAAACTI/qL60KAwLbLo/s400/mamonta-ne-bylo.jpg" alt="Мамонта не было"/>
Здесь может располагаться текст, который легко выделяется левой клавишей мышки. </span></label>

html pop up

Как сделать модальное окно
Как реализовать всплывающую подсказку

<style type="text/css">
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
.infoPanel {display:inline-block; position:relative; padding:15px; border-radius:10px; width:auto; margin-left:10px; background:#000; text-indent: 0px;}

div.hiddenbox {padding:15px; margin:0; list-style:none; display:none; width:auto; color:#eee;}
div.hiddenbox a {font:normal 12px georgia, serif; color:#9fc;}
div.popdown {display:none; width:auto; height:500px; margin-top:-500px; position:relative; z-index:100; cursor:pointer;}
a.popup {display:block; width:auto; height:auto;}
a.popup img {border:0;}
a.popup:focus {outline:0;}
a.popup:focus ~ div {display:block; }
a.popup:focus + .popdown {display:block; }
div.hiddenbox:hover {display:block;}
div.hiddenbox:focus {display:none;}
</style>

<div class="infoPanel">
<a class="popup" href="#x" tabindex="1">html pop up</a><div class="popdown">
</div>
<div class="hiddenbox" tabindex="1">
<img border="0" height="194" width="260" src="http://3.bp.blogspot.com/-meBgS3OjviM/Tm4A7jrkHaI/AAAAAAAACTQ/4yFlMfvrplQ/s400/starushka.jpg" />
<a href="http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html">Как сделать модальное окно</a>
<a href="http://shpargalkablog.ru/2011/02/vsplyvayushchiye-podskazki.html">Как реализовать всплывающую подсказку</a>
</div>
</div>

<style type="text/css">
.skryt > div {display:none;}
.skryt:hover > div, .skryt > div:hover {display:block;}
</style>   

<div class="skryt">Информация<div>становится видна после наведения на слово-кнопку.</div></div>