Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 17.12.2016
Сообщений: 47

Расположение независимо от полосы прокрутки

21.11.2019, 13:52. Показов 747. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
При клике на картинку увеличивается картинка и появляется серый прозрачный фон, которые прикреплены в верхнее положение страницы (скрины есть). JS используется, но проблема в CSS, не знаю что указать.
Нужно сделать так, чтобы при клике прозрачный серый фон и картинка заполнила все окно экрана и не зависела от положения полосы прокрутки.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
body {
    margin:0;
}
 
.image {
    margin:30px; 
    float:left;
    cursor:pointer;
    max-height:100px;
}
 
.popup {
    position: absolute;
    height:100%;
    width:100%;
    display:none;
    text-align:center;
}
 
.popup_bg {
    background:rgba(0,0,0,0.4);
    position:absolute;
    z-index:1;
    height:100%;
    width:100%;
}
 
 
.popup_img {
    position: relative;
    margin:0 auto;
    z-index:2;
    max-height:94%;
    max-width:94%;
    margin:1% 0 0 0;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Страница</title>
<link rel="stylesheet" href="css/template.css" type="text/css" />
<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
<script type="text/javascript" src="js/popup_img.js"></script>
</head>
<body>
<img src="images/image1.jpg" class="image" alt="Пейзаж" />
<img src="images/image2.jpg" class="image" alt="Пейзаж" /> 
<img src="images/image3.jpg" class="image" alt="Пейзаж" />
....
<img src="images/image3.jpg" class="image" alt="Пейзаж" />
</body>
</html>


JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {  
    $(".image").click(function(){   
        var img = $(this);  
        var src = img.attr('src'); 
        $("body").append("<div class='popup'>"+ 
                         "<div class='popup_bg'></div>"+ 
                         "<img src="+src+" class='popup_img' />"+
                         "</div>"); 
        $(".popup").fadeIn(500); 
        $(".popup_bg").click(function(){      
            $(".popup").fadeOut(500);
            setTimeout(function() { 
              $(".popup").remove();
            }, 500);
        });
        $(".popup").click(function(){   
            $(".popup").fadeOut(500);   
            setTimeout(function() { 
              $(".popup").remove(); 
            }, 500);
        });
    });
});
Миниатюры
Расположение независимо от полосы прокрутки   Расположение независимо от полосы прокрутки  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
21.11.2019, 13:52
Ответы с готовыми решениями:

div с полосой прокрутки, стиль полосы прокрутки
Добрый день! Подскажите как правильно создать блочный элемент, вероятней всего div встроенный в страницу с полосой прокрутки. Полоса...

Создать элемент для отображения флэш-фильма, расположенный независимо от прокрутки (банер)
Подскажите пожалуйста, как сделать.

Параметры полосы прокрутки
Подскажите, пожалуйста, как можно изменить внешний вид полосы прокрутки (которая появляется при overflow: scroll или avto)? Нужно сделать...

1
0 / 0 / 0
Регистрация: 17.12.2016
Сообщений: 47
21.11.2019, 14:44  [ТС]
Получилось. Нужно задать в position свойство fixed
Тема закрыта
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
21.11.2019, 14:44
Помогаю со студенческими работами здесь

Стилизация полосы прокрутки
Имеется блок и внутри список. В свойстве блока overflov стоит авто, т.е с боку добавляется полоса прокрутки. Можно как то ее стилизировать?...

сайт дёргается из за полосы прокрутки
Народ помогите пожалуйста! При кликам по меню, сайт дёргается влево из за полосы прокрутки на некоторых страницах как зафиксить...

Стиль горизонтальной полосы прокрутки
Здравствуйте, подскажите возможно ли изменить стиль полосы прокрутки т.е. изменить цвет и т.д. overflow: auto;

Автофокус горизонтальной полосы прокрутки
горизонтальная полоса прокрутки в блочном элементе &lt;p&gt;, после того, как её двигаешь мышью, может двигаться клавишами влево и вправо. При...

Появление нижней полосы прокрутки
Товарищи, прошу помощи! Уже несколько часов бьюсь над вопросом, почему возникает нижняя полоса прокрутки на лендинге (лабораторная работа...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru