Изображение на весь экран при клике

152
18 апреля 2018, 04:36

У меня есть вот такой код

<div class="image" id="image" style="background-image:url('...')"></div>

Мне нужно чтобы при клике на этот див вылазило модальное окно на весь экран (или почти на весь, главное чтобы большого размера) с изображением, которое находится внутри этого дива. Как это можно реализовать? Без разницы подключая ли js или можно через css, не имеет значения.

Answer 1

Вот тебе на js и без подключения каких-либо библиотек.

var image = document.querySelector('.image');
image.addEventListener(click, function() {
  image.classList.toggle('show');
});
Answer 2

Вот решение jQuery, взято с официального сайта:

$( "#foo" ).toggleClass( className, addOrRemove );

И проверка:

if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}
READ ALSO
Стилизация раскрывающегося списка

Стилизация раскрывающегося списка

Задачи: 1стилизовать выпадающий список, чтобы он выглядел так

191
Прокрутка до якоря на маленьких экранах

Прокрутка до якоря на маленьких экранах

Добрый день коллегиЕсть сайт на bootstrap, он отлично сжимается на мобилке/планшете/нетбуке, без косяков

176
Слайдер с наложением друг на друга

Слайдер с наложением друг на друга

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

179
Взаимодействие между canvas

Взаимодействие между canvas

Имеются два объекта: игрок и враг

191