Окно в браузере поверх страницы

@dainis12 · Регистрация: 20.03.2018

Студворк — интернет-сервис помощи студентам

Всем привет, подскажите пожалуйста каким образом в соц. сетях при нажатии на фото/запись открывается поверх предыдущего окна новое с конкретной записью, где есть фото и комментарии. Типо alert, но в Alert нельзя выложить фото. Подскажите как поверх предыдущего окна вернуть пользователю фото. Надеюсь понятно объяснил!

@Lazy_Den · 20.05.2018, 19:47

Сообщение от dainis12

поверх предыдущего окна новое

Возможно, что вы говорите о так называемых пользовательских "модальных окнах". Ничего сверхъестественного в них нет. Если вам знакомы такие понятия и свойства CSS, как слои (z-index) и позиционирование (position), то создать такие окна не составит большого труда. Сложность может у вас возникнуть, если вы не знакомы с JavaScript, т.к. открытие таких окон, во многих случаях выполняется именно его средствами.
Вот простой пример.

HTML+CSS+JS

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
#layer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .3);
  text-align: center;
  z-index: 10;
}
 
#layer::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
 
#modal {
  display: inline-block;
  width: 50%;
  padding: 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 3px 5px rgba(0, 0, 0, .3);
  vertical-align: middle;
}

HTML5
1
2
3
4
<button>Open Modal</button>
<div id="layer">
  <div id="modal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde deleniti, non illo nostrum neque, accusantium praesentium error aperiam quo facere corrupti officia quia obcaecati debitis harum a! Necessitatibus, sequi, labore.</div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
const layer = document.getElementById('layer');
document.querySelector('button').addEventListener('click', () => {
  layer.style.display = 'block';
});
layer.addEventListener('click', (e) => {
  if (e.target === layer) {
    layer.style.display = 'none';
  }
});

На всякий случай, вариант без JS. Хотя, за всю мою практику, удобного случая использовать такой способ - не было.

@dainis12 · 20.05.2018, 22:46 **[ТС]**

Спасибо большое, коротко и ясно, а то даже не знал какие слова подобрать чтобы запрос в гугловской сформировать!

Новые блоги и статьи Все статьи Все блоги /
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .

@dainis12 0 / 0 / 0 Регистрация: 20.03.2018 Сообщений: 27

	Окно в браузере поверх страницы 20.05.2018, 18:21. Показов 10033. Ответов 2 Метки нет (Все метки) Всем привет, подскажите пожалуйста каким образом в соц. сетях при нажатии на фото/запись открывается поверх предыдущего окна новое с конкретной записью, где есть фото и комментарии. Типо alert, но в Alert нельзя выложить фото. Подскажите как поверх предыдущего окна вернуть пользователю фото. Надеюсь понятно объяснил! 0

@dainis12 0 / 0 / 0 Регистрация: 20.03.2018 Сообщений: 27
	20.05.2018, 22:46 [ТС]
	Спасибо большое, коротко и ясно, а то даже не знал какие слова подобрать чтобы запрос в гугловской сформировать! 0

Окно в браузере поверх страницы

Решение