Приложение 1: Модальное окно

Событие click на нескольких элементах с одним input

Для того, чтобы lightbox работал, я пришла к этой конструкции (это двигатель моей "машины"):


<!-- input должен находится выше изображений. У него не должно быть родителя, который при этом не является родителем label. Чтобы не путаться, input располагайте после <body> -->
<input type="checkbox" id="click"/>
<br>
<label for="click"></label>
<br>
<label for="click"></label>

Модальное окно

Очень простое в реализации, "легкое" и вместе с тем позволяет включать любое содержание модальное окно. Не заданы фиксированные ширина и высота, блок располагается по центру, растягивается под содержание и под разрешение монитора.

<style type="text/css">
.vkl { cursor: zoom-in; cursor: -moz-zoom-in; cursor: -webkit-zoom-in;}

.lightbox {
  display: none;
  height: 100%; width: 100%;
  position: fixed; top: 0%; left: 0%;}

.lightbox:target {display: table;}

.lightbox > div {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

.lightbox > div > div {
  display: inline-block;
  position: relative;
}

.video {  
  width: 50%;
  position: fixed; top: 12%; left: 25%;
  display: none;}

.lightbox > div > div, .video {
  padding: 8px;
  background: #fff;
  text-align: left;
  box-shadow: 0 0 5px #fff;
  z-index: 101;
}

.lightbox img {width: 100%; padding: 0px; display: block;}

.video > div {
  padding-bottom:75%;
  height: 0;
  position: relative;}

.video iframe, .video object, .video embed {position: absolute; left: 0; top: 0;}

a[href="#close"] {
  position: fixed; top: 0; bottom: 0; right: 0; left: 0;
  z-index: 100;
  cursor: zoom-out; cursor: -moz-zoom-out; cursor: -webkit-zoom-out;
  background: rgba(0, 0, 0, 0.6);
  text-align: right;
  font-size: 200%; 
  padding-right: 7px;
  text-decoration: none;
  color: #cccccc;
  display: none;}

a[href="#close"]:hover {color: #fff;}

.video:target, .video:target ~ a[href="#close"], .lightbox:target ~ a[href="#close"] {display: block;}
</style>

<a href="#showimage1" class="vkl">Образец</a>

<div class="lightbox" id="showimage1">
  <div>
    <div>
      <img src="адрес_изо"/>
      Текст
    </div>
  </div>
</div>

<a href="#close">✖</a>

Образец
Для видео несколько отличается HTML код:

<a href="#showimage2" class="vkl">Образец</a>

<div class="video" id="showimage2">   
  <div>
    <iframe width="100%" height="100%" src="адрес_видео" frameborder="0" allowfullscreen></iframe>
  </div>
  Текст
</div>

<a href="#close">✖</a>

Образец

Текст

Реализация происходит с помощью псевдокласса :target. Стили достаточно прописать один раз, а id блока должен быть индивидуальным. Например, так:

<a href="#showimage1" class="vkl">Раз</a><a href="#showimage2" class="vkl">Два</a><a href="#showimage3" class="vkl">Три</a>

<div class="lightbox" id="showimage1">
  <div>
    <div>
      <a href="#showimage3">◄</a> ॥ <a href="#showimage2">►</a>
      <img src="адрес_изо"/>
      Текст
    </div>
  </div>
</div>

<div class="lightbox" id="showimage2">
  <div>
    <div>
      <a href="#showimage1">◄</a> ॥ <a href="#showimage3">►</a>
      <img src="адрес_изо"/>
      Текст
    </div>
  </div>
</div>

<div class="video" id="showimage3">  
  <a href="#showimage2">◄</a> ॥ <a href="#showimage1">►</a> 
  <div>
    <iframe width="100%" height="100%" src="адрес_видео" frameborder="0" allowfullscreen></iframe>
  </div>
  Текст
</div>

<a href="#close" title="закрыть">✖</a>

Раз Два Три

◄ ॥ ►

Текст_3

С помощью CSS анимации можно сделать всевозможные эффекты, скажем такой

<style type="text/css">
.lightbox:target, .video:target {
  -moz-animation: fadeInScale 1.2s ease-in-out;
  -webkit-animation: fadeInScale 1.2s ease-in-out;
  -o-animation: fadeInScale 1.2s ease-in-out;
  -ms-animation: fadeInScale 1.2s ease-in-out;
  animation: fadeInScale 1.2s ease-in-out;
}

@-webkit-keyframes fadeInScale {
  0% { -webkit-transform: scale(10); opacity: 0; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes fadeInScale {
  0% { -moz-transform: scale(10); opacity: 0; }
  100% { -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes fadeInScale {
  0% { -o-transform: scale(10); opacity: 0; }
  100% { -o-transform: scale(1); opacity: 1; }
}
@-ms-keyframes fadeInScale {
  0% { -ms-transform: scale(10); opacity: 0; }
  100% { -ms-transform: scale(1); opacity: 1; }
}
@keyframes fadeInScale {
  0% { transform: scale(10); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
</style>

Пример
Анимация позволит и сделать так, чтобы модальное окно открывалось при загрузке страницы спустя какое-то время. Но данный эффект доступен не всем браузерам.

<style type="text/css">
.lightbox {
 position: fixed; top: 0%; left: 0%;
 height: 100%; width: 100%;
 background: rgba(0, 0, 0, 0.6);
 z-index: 100;
 text-align: center;
 visibility: hidden;
 -moz-animation: fadeInScale 1.2s ease-in-out 7s forwards;
 -webkit-animation: fadeInScale 1.2s ease-in-out 7s forwards;
 -o-animation: fadeInScale 1.2s ease-in-out 7s forwards;
 -ms-animation: fadeInScale 1.2s ease-in-out 7s forwards;
 animation: fadeInScale 1.2s ease-in-out 7s forwards;
}

.lightbox > p {
 display: inline-block;
 padding: 8px;
 background: #fff;
 margin-top: 50px;
 text-align: left;
 box-shadow: 0 0 5px #fff;
}

.lightbox img { padding: 0px; }

.lightbox > p > a {
 display: block; 
 text-align:right;
}

@-webkit-keyframes fadeInScale {
  0% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}
@-moz-keyframes fadeInScale {
  0% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}
@-o-keyframes fadeInScale {
  0% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}
@-ms-keyframes fadeInScale {
  0% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}
@keyframes fadeInScale {
  0% { opacity: 0; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}

.lightbox:target { display: none; }
</style>

<div class="lightbox" id="showimage">
<p>
<a href="#showimage">✖</a><img border="0" src="URL_изо" />
какой-то текст </p>
</div>

Поскольку элемент фиксируется на экране монитора, то прокрутка здесь невозможна. Немного по другому оформим код.

<style type="text/css">
.vkl { cursor: zoom-in; cursor: -moz-zoom-in; cursor: -webkit-zoom-in;}

.lightbox1 {display: none; position:fixed;}

.lightbox1 + div {
  display: none;
  padding: 8px;
  background: #fff;
  box-shadow: 0 0 5px #fff;
  z-index: 101;
  position: relative;}

.lightbox1:target + div {display: inline-block;}

a[href="#close"] {
  position: fixed; top: 0; bottom: 0; right: 0; left: 0;
  z-index: 100;
  cursor: zoom-out; cursor: -moz-zoom-out; cursor: -webkit-zoom-out;
  background: rgba(0, 0, 0, 0.6);
  text-align: right;
  font-size: 200%; 
  padding-right: 7px;
  text-decoration: none;
  color: #cccccc;
  display: none;}

a[href="#close"]:hover {color: #fff;}

.lightbox1:target ~ a[href="#close"], .lightbox1 + div img, .lightbox1 + div iframe {padding: 0px; display: block;}
</style>

<a href="#showimage3" class="vkl">Образец</a>

<br id="showimage3" class="lightbox1"/><div>
  <img alt="Мечты" src="адрес_изо">
  Текст_1
</div>

<a href="#close">✖</a>

Пример