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

Очень простое в реализации, "легкое" и вместе с тем позволяет включать любое содержание модальное окно. При его открытии весь экран "гаснет" и на первый план выходит определённый блок.

<style type="text/css">
.lightbox {
 display: none;
 position: fixed; top: 0%; left: 0%;
 height: 100%; width: 100%;
 background: rgba(0, 0, 0, 0.6);
 z-index: 100;
 text-align: center;
}

.lightbox:target { display: block; }

.lightbox:target > 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 a[href="#close"] {
 display: block; 
 text-align:right;
}

#close { cursor: zoom-in; cursor: -moz-zoom-in; cursor: -webkit-zoom-in;}
</style>

<a href="#showimage" id="close">Образец</a>

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

Образец

✖
какой-то текст

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

<style type="text/css">
.lightbox {
 display: none;
 position: fixed; top: 0%; left: 0%;
 height: 100%; width: 100%;
 background: rgba(0, 0, 0, 0.6);
 z-index: 100;
 text-align: center;
}

.lightbox:target { display: block; }

.lightbox:target > 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 a[href="#close"] {
 float: right;
 display: inline-block;
}

.lightbox > p > a, .lightbox > p > a > a { text-decoration: none; }

#close a { cursor: zoom-in; cursor: -moz-zoom-in; cursor: -webkit-zoom-in;}
</style>

<div id="close">
<a href="#showimage1">Раз</a> <a href="#showimage2">Два</a> <a href="#showimage3">Три</a></div>

<div class="lightbox" id="showimage1">
<p>
<a href="#showimage3">&#8592;</a> || <a href="#showimage2">&#8594;</a><a href="#close">✖</a>
<img border="0" src="URL_изо1"/>
какой-то текст 1 </p>
</div>

<div class="lightbox" id="showimage2">
<p>
<a href="#showimage1">&#8592;</a> || <a href="#showimage3">&#8594;</a><a href="#close">✖</a>
<img border="0" src="URL_изо2" />
какой-то текст 2 </p>
</div>

<div class="lightbox" id="showimage3">
<p>
<a href="#showimage2">&#8592;</a> || <a href="#showimage1">&#8594;</a><a href="#close">✖</a>
<img border="0" src="URL_изо3" />
какой-то текст 3 </p>
</div>

Раз Два Три

← || →✖

какой-то текст 1

← || →✖

какой-то текст 2

← || →✖

Очень качественная реклама

Как видите ещё один плюс данного модального окна заключается в том, что у него не заданы фиксированные ширина и высота, а блок растягивается под содержание, но указывайте не больше ширины/высоты экрана пользователя. С помощью CSS анимации можно сделать всевозможные эффекты, скажем такой

<style type="text/css">
.lightbox: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>

Если не нравится, принудительный переход к точке страницы с id="close" при закрытии модального окна, то можно применить небольшой скрипт:

<style type="text/css">
.lightbox {
 display: none;
 position: fixed; top: 0%; left: 0%;
 height: 100%; width: 100%;
 background: rgba(0, 0, 0, 0.6);
 z-index: 100;
 text-align: center;
}

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

</style>

<a href="javascript:void(0)" onclick="document.getElementById('showimage').style.display='block'">Образец</a>

<div class="lightbox" id="showimage">
<p>
<a href="javascript:void(0)" onclick="document.getElementById('showimage').style.display='none'">✖</a><img border="0" src="URL_изо" />
какой-то текст </p>
</div>

Образец

✖
какой-то текст

Поскольку элемент фиксируется на экране монитора, то прокрутка здесь невозможна. Немного по другому оформим код, использовав псевдоэлемент :after, абсолютное позиционирование и @media для того, чтобы картинка соответствовала разрешению монитора (адаптированно под шаблон shpargalkablog.ru).

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

.lightbox {
 display: none;
 text-align: center; 
 position: relative;
}

.lightbox:target { display: block; }

.lightbox:target:after {  /* затемнение экрана */ 
 content: "";
 position: fixed; top: 0%; left: 0%;
 height: 100%; width: 100%;
 background: rgba(0, 0, 0, 0.8);
 z-index: 100;
}

.lightbox:target > p {
 position: relative;
 z-index: 101;
 display: inline-block;
 padding: 8px;
 background: #fff;
 text-align: left;
 box-shadow: 0 0 5px #fff;}

.lightbox a[href="#close"] {
 display: block; 
 text-align:right;
}

.lightbox img { padding: 0px; }

@media (min-width: 1281px) {
 .lightbox10:target {
   width: 1220px;
   left: -15%; /* мне это нужно, поскольку до сообщения есть отступ margin */ 
 }
 .lightbox10 img { max-width: 1200px; }
 .lightbox10 iframe { max-width: 1200px; max-height: 640px;}
}

@media (max-width: 1280px) {
 .lightbox10:target { width: 1139px; left: -10%; }
 .lightbox10 img { max-width: 1000px; }
 .lightbox10 iframe { max-width: 1000px; max-height: 538px;}
}

@media (max-width: 1139px) {
 .lightbox10:target { width: 1025px; left: -13%; }
 .lightbox10 img { max-width: 900px; }
 .lightbox10 iframe { max-width: 900px; max-height: 488px;}
}

@media (max-width: 1025px) { /* ниже не рассматриваю, поскольку у меня шаблон растягивается от 940px до 1100px */ 
 .lightbox10:target { width: 900px; left: -3%; }
 .lightbox10 img { max-width: 800px; }
 .lightbox10 iframe { max-width: 800px; max-height: 437px; }
}

</style>


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

Образец

✖
какой-то текст