How TO — Modal Images
Learn how to create responsive Modal Images with CSS and JavaScript.
Modal Image
A modal is a dialog box/popup window that is displayed on top of the current page.
This example use most of the code from the previous example, Modal Boxes, only in this example, we use images.
Step 1) Add HTML:
Example
class=»modal» is a container element for the modal and the div with class=»modal-content» is where you put your modal content (headings, paragraphs, images, etc).
The element with class=»close» should be used to close the modal.
Step 2) Add CSS:
Example
/* Style the Image Used to Trigger the Modal */
#myImg border-radius: 5px;
cursor: pointer;
transition: 0.3s;
>
/* The Modal (background) */
.modal display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
>
/* Modal Content (Image) */
.modal-content margin: auto;
display: block;
width: 80%;
max-width: 700px;
>
/* Caption of Modal Image (Image Text) — Same Width as the Image */
#caption margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
>
/* Add Animation — Zoom in the Modal */
.modal-content, #caption <
animation-name: zoom;
animation-duration: 0.6s;
>
/* The Close Button */
.close position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
>
.close:hover,
.close:focus color: #bbb;
text-decoration: none;
cursor: pointer;
>
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) .modal-content width: 100%;
>
>
The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.
Add a black background color with opacity.
Set position to fixed; meaning it will move up and down the page when the user scrolls.
It is hidden by default, and should be shown with a click of a button (we’ll cover this later).
The .modal-content class
This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).
We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.
The .close class
The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.
Step 3) Add JavaScript:
Example
// Get the modal
var modal = document.getElementById(«myModal»);
// Get the image and insert it inside the modal — use its «alt» text as a caption
var img = document.getElementById(«myImg»);
var modalImg = document.getElementById(«img01»);
var captionText = document.getElementById(«caption»);
img.onclick = function() modal.style.display = «block»;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
>
// Get the element that closes the modal
var span = document.getElementsByClassName(«close»)[0];
// When the user clicks on (x), close the modal
span.onclick = function() <
modal.style.display = «none»;
>
Tip: Also check out Modals and Lightbox.
Popup an Image on Mouseover Using CSS
In this article I am going to tell how it easy to popup an image using CSS on mouseover. For popup an image you should not require to use a jquery library file. CSS make its pretty to popup an image and look stylish with better layout. In this tutorial we are using simple html div and span. With the CSS layout make popup on image using mouse over. Let us see in detail below . Have a look.
Vikash
Basically the main importance for popup an image depends on CSS. CSS layout is set different for mouse over and that is why when we hover mouse on image popup open for respective image. Here we are displaying main image on mouseover.
CSS
.thumbnail < position: relative; z-index: 0; >.thumbnail:hover < background-color: transparent; z-index: 50; >/* CSS for enlarged image */ .thumbnail span < position: absolute; background-color:#d7d7d7; padding: 5px; left: -50px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; >/*CSS for popup image*/ .thumbnail span img < border-width: 0; padding: 2px; >/*CSS for popup image on mousehover*/ .thumbnail:hover span
Как сделать — Модальное изображение
Узнать, как создать адаптивные модальные изображения с помощью CSS и JavaScript.
Модальное изображение
Модаль — это диалоговое окно/всплывающее окно, которое отображается в верхней части текущей страницы.
В этом примере используется большая часть кода из предыдущего примера, Модальное окно, только в этом примере мы используем изображения.
Шаг 1) Добавить HTML:
Пример
class=»modal» is a container element for the modal and the div with class=»modal-content» is where you put your modal content (headings, paragraphs, images, etc).
The element with class=»close» should be used to close the modal.
Шаг 2) Добавить CSS:
Пример
/* Стиль изображения, используемого для запуска модального */
#myImg border-radius: 5px;
cursor: pointer;
transition: 0.3s;
>
/* Модальный (фон) */
.modal display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
padding-top: 100px; /* Расположение коробки */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полный высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: rgb(0,0,0); /* Цвет запасной вариант */
background-color: rgba(0,0,0,0.9); /* Черный с непрозрачностью */
>
/* Модальное содержание (изображение) */
.modal-content margin: auto;
display: block;
width: 80%;
max-width: 700px;
>
/* Заголовок модального изображения ( текст изображения) — та же ширина, что и изображение */
#caption margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
>
/* Добавить анимацию — величение модели */
.modal-content, #caption animation-name: zoom;
animation-duration: 0.6s;
>
/* Кнопка закрытия */
.close position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
>
.close:hover,
.close:focus color: #bbb;
text-decoration: none;
cursor: pointer;
>
/* 100% Ширина изображения на меньших экранах */
@media only screen and (max-width: 700px) .modal-content width: 100%;
>
>
The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.
Добавить a black background color with opacity.
Set position to fixed; meaning it will move up and down the page when the user scrolls.
It is hidden by default, and should be shown with a click of a button (we’ll cover this later).
The .modal-content class
This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).
We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.
The .close class
The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.
Шаг 3) Добавить JavaScript:
Пример
// Получить модель
var modal = document.getElementById(«myModal»);
// Получите изображение и вставьте его внутрь модального — используйте его текст «alt» в качестве подписи
var img = document.getElementById(«myImg»);
var modalImg = document.getElementById(«img01»);
var captionText = document.getElementById(«caption»);
img.onclick = function() modal.style.display = «block»;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
>
// Получить элемент , который закрывает модальный
var span = document.getElementsByClassName(«close»)[0];
// Когда пользователь нажимает на (x), закройте модальное окно
span.onclick = function() modal.style.display = «none»;
>
Совет:Кроме того, проверить Модальное окно и Лайтбокс.