Хочешь сайт? Легко!

lightbox

Модальное окно (lightbox) на CSS.

При открытии модального окна весь экран "гаснет" и на первый план выходит определённый элемент. Его создание не сложно.

Модальное окно с прокруткой

Для большого объёма контента, когда требуется прокрутка, скроллинг body, а не содержимого всплывающей записи вызывает неудобство.

Название. Если оно очень длинное, то обрезается, когда не помещается в одну строку, в конце появляется многоточие.
<!-- CSS прописать один раз -->
<style class="style" contenteditable>
.lightbox1 {
  display: none;
}
.lightbox1 + label {  /* надпись "образец" */
  border-bottom: 1px dashed;
  cursor: zoom-in;
}
.lightbox1 + label + * {  /* коробка */
  visibility: hidden;
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: rgba(0,0,0,.5);
  text-align: center;
  line-height: 100vh;
}
.lightbox1:checked + label + * {
  visibility: visible;
}
.lightbox1 + label + * > * {  /* position: absolute; как-то странно себя ведёт в родителе с position: fixed;, поэтому была задействована ещё одна обёртка */
  position: relative;
}
.lightbox1 + label + * > * > :first-child {  /* кликабельный фон */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: zoom-out;
}
.lightbox1 + label + * > * > :last-child {  /* блок с окном */
  position: relative;
  display: inline-block;
  max-width: calc(100% - (8px + 2px)*2);
  margin: 8px;
  border: 2px solid rgb(51, 103, 153);
  box-shadow: 0 0 0 8px rgba(255,255,255,.2);
  background: #fff;
  text-align: left;
  line-height: normal;
  vertical-align: middle;
}
.lightbox1 + label + * > * > :last-child > :first-child {  /* заголовок */
  position: relative;
  padding: .5em 4em .5em .5em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
  color: #fff;
  background: linear-gradient(#669acc 50%, #5589bb 50%);
}
.lightbox1 + label + * > * > :last-child > :first-child label {  /* крестик "закрыть" */
  position: absolute;
  top: calc(.5em - 2px);
  right: calc(.5em - 2px);
  font-weight: 600;
  cursor: pointer;
}
.lightbox1 + label + * > * > :last-child > :last-child {  /* поле после заголовка */
  padding: .5em;
}
.lightbox1 + label + * > * > :last-child > :last-child label {
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.lightbox1 + label + * label > button {
  position: relative;
  z-index: -1;
}
</style>

<!-- input, label и div идут друг за другом, между ними не должно быть других тегов. for тот же, что и id.
id должен использоваться на странице только единожды. То есть, чтобы создать несколько всплывающих элементов, нужно всем input задать один класс lightbox, но разные id. -->
<input type="checkbox" id="dva" class="lightbox1"/>
<label for="dva">образец</label>
<div><div>
  <label for="dva"></label>
  <div>
    <div>Название<label for="dva">✖</label></div>
    <div>Модальное окно для большого содержания</div>
  </div>
</div></div>

<!-- пока красивого решения убрать скролл body я не вижу. Могу предложить в input добавить обработчик событий JavaScript -->
<script>
var inp = document.getElementsByClassName('lightbox1');
for (var i = 0; i < inp.length; i++) {
  inp[i].onclick = function() {
    document.documentElement.style.overflow=(this.checked ? 'hidden' : 'auto');
    document.documentElement.style.marginRight=(this.checked ? '17px' : '');
  }
}
</script>

Простое модальное окно с затемнением

Если в нём разместить небольшое содержание, например, форму обратной связи, форму регистрации, форму "заказать обратный звонок" или текстовое сообщение, то оно будет располагаться по центру.

форма обратной связи

Видео YouTube в модальном окне

переправа
<style>
img[src$="/mqdefault.jpg"] + iframe {
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-box-sizing: border-box; box-sizing: border-box;
  border: solid rgba(0,0,0,.3);
  border-width: 5vh 5vw;
}
</style>

<img title="видео: переправа" alt="переправа" src="http://img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg" height="180" width="320" class="tr-caption-container"/>

<script>
var img = document.querySelectorAll('img[src$="/mqdefault.jpg"]');
for (var i = 0; i < img.length; i++) {
  img[i].onclick = function() {
    var idImg = this.src.replace(/http...img.youtube.com.vi.(.*?).mqdefault.jpg/gi, '$1');
    theIframe = document.createElement('iframe');
    theIframe.src = '//www.youtube.com/embed/' + idImg + '?rel=0&autoplay=1';
    theIframe.onclick = function () {this.parentElement.removeChild(this);};
    this.parentNode.insertBefore(theIframe, this.nextSibling);
  }
}
</script>

Сделать, чтобы картинка была во весь экран при нажатии на неё

семья медведей лебедь

Если нужно только увеличение изображений при клике на них, то можно воспользоваться кодом ниже (не идеально: теги, выше элемента остаются активными):


<!-- размер фотографии, видимой на HTML-странице делается меньше, чем он есть на самом деле. При щелчке по картинке фото принимает свой настоящий вид -->
<img src="адрес" alt="" width="150" tabindex="0"/>
<img src="адрес" alt="" width="400" tabindex="0"/>
семья медведей лебедь

<!-- размер фотографии, видимой на HTML-странице делается меньше, чем он есть на самом деле. При щелчке по картинке фото принимает свой настоящий вид -->
<img src="адрес" alt="" width="150" class="zoom"/>
<img src="адрес" alt="" width="400" class="zoom"/>

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !