Появление и исчезание

@timurbegiev · Регистрация: 04.05.2013

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

Привет всем! Интересует вопрос как сделать появление блока и исчезание с javascript. Вот например: при нажатии на ссылку "русский" внизу страницы в вконтакте фон становится прозрачно-черным, появляется блок с языками и прокрутка страницы становится не возможна, а при нажатии на "закрыть" блок пропадает и прокрутка снова возможна. Интересует сама идея как это можно сделать. Помогите весь мозг убил думая.

вот и в facebook есть такое

@kalabuni · 04.05.2013, 16:46

все просто

это как три листа бумаги, положенные друг на друга
а) самый нижний лист - это основной контент страницы, тег <body>
б) поверх него - лист такой же ширины, тег <div id="fon">
в) самый верхний - тот самый открывающийся/закрывающийся блок нужной нам ширины/высоты, тег <div id="show">

тег <body> всегда на странице имеется
теги <div id="fon"> и <div id="show"> прописываем внутри <body> и делаем их оба изначально невидимыми -- display: none
и абсолютно спозиционированными -- position: absolute

кроме того, изначально задаём им обоим свойство z-index, которое устанавливает как бы "номер слоя"
чем больше значение, тем как бы дальше от экрана (и ближе к пользователю)

т.е. раскладываем их один на другой, как выше и договаривались
тег <body> по умолчанию имеет значение z-index чуть больше нуля, он самый нижний "лист" у нас
тегу <div id="fon"> (нашему среднему "листу") присваиваем, например, -- z-index: 5
ну а блоку <div id="show">, который наш блок для просмотра, значение устанавливаем побольше -- z-index: 10

ну и самое интересное
делаем средний "лист", тег <div id="fon"> абсолютно чёрным -- background: black
но с прозрачностью где-то 50% -- filter: alpha(opacity=50); opacity: .5 (первое понимает Эксплорер, второе - для всех остальных браузеров)
-----

вот и всё
далее, как вы уже должны догадаться, при нажатии на что-то (например, на картинку-ссылку) помещаем в <div id="show"> нужное содержимое (например, ту же картинку, но побольше)
и делаем оба наших <div>'a видимыми -- style.display = 'block';

смотрим и наслаждаемся
как надоест смотреть, кликаем на "Закрыть" и оба <div>'а снова делаем невидимыми

да, чуть не забыл... про прокрутку
тег <body> по умолчанию имеет свойство стиля -- overflow: scroll
т.е. справа всегда зарезервировано место под вертикальный скроллбар (даже если страница полностью умещается по высоте в экран
так вот, при просмотре блока командуем "скрыть прокрутку" -- document.body.style.overflow = 'hidden';
а при закрытии блока снова разрешаем "крутить"

всё в принципе понятно, или нет?
есть ещё нюансы с определением геометрических размеров обоих <div>'ов и их положения на экране (отцентровка там и прочее)
но для вас, я полагаю, это уже мелочи...

@timurbegiev · 05.05.2013, 11:27 **[ТС]**

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

все просто

...

Я это и так знаю. Дело в том что при нажатии загружается данные с другой страницы. Вот как это сделать не могу придумать.

@kalabuni · 05.05.2013, 12:17

04.05.2013 14:28

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

Интересует сама идея как это можно сделать.

05.05.2013 11:27

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

Я это и так знаю.

@timurbegiev · 05.05.2013, 12:25 **[ТС]**

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@timurbegiev 0 / 0 / 0 Регистрация: 04.05.2013 Сообщений: 8

	Появление и исчезание 04.05.2013, 14:28. Показов 2040. Ответов 4 Метки нет (Все метки) Привет всем! Интересует вопрос как сделать появление блока и исчезание с javascript. Вот например: при нажатии на ссылку "русский" внизу страницы в вконтакте фон становится прозрачно-черным, появляется блок с языками и прокрутка страницы становится не возможна, а при нажатии на "закрыть" блок пропадает и прокрутка снова возможна. Интересует сама идея как это можно сделать. Помогите весь мозг убил думая. вот и в facebook есть такое 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	04.05.2013, 16:46
	все просто это как три листа бумаги, положенные друг на друга а) самый нижний лист - это основной контент страницы, тег <body> б) поверх него - лист такой же ширины, тег <div id="fon"> в) самый верхний - тот самый открывающийся/закрывающийся блок нужной нам ширины/высоты, тег <div id="show"> тег <body> всегда на странице имеется теги <div id="fon"> и <div id="show"> прописываем внутри <body> и делаем их оба изначально невидимыми -- display: none и абсолютно спозиционированными -- position: absolute кроме того, изначально задаём им обоим свойство z-index, которое устанавливает как бы "номер слоя" чем больше значение, тем как бы дальше от экрана (и ближе к пользователю) т.е. раскладываем их один на другой, как выше и договаривались тег <body> по умолчанию имеет значение z-index чуть больше нуля, он самый нижний "лист" у нас тегу <div id="fon"> (нашему среднему "листу") присваиваем, например, -- z-index: 5 ну а блоку <div id="show">, который наш блок для просмотра, значение устанавливаем побольше -- z-index: 10 ну и самое интересное делаем средний "лист", тег <div id="fon"> абсолютно чёрным -- background: black но с прозрачностью где-то 50% -- filter: alpha(opacity=50); opacity: .5 (первое понимает Эксплорер, второе - для всех остальных браузеров) ----- вот и всё далее, как вы уже должны догадаться, при нажатии на что-то (например, на картинку-ссылку) помещаем в <div id="show"> нужное содержимое (например, ту же картинку, но побольше) и делаем оба наших <div>'a видимыми -- style.display = 'block'; смотрим и наслаждаемся как надоест смотреть, кликаем на "Закрыть" и оба <div>'а снова делаем невидимыми да, чуть не забыл... про прокрутку тег <body> по умолчанию имеет свойство стиля -- overflow: scroll т.е. справа всегда зарезервировано место под вертикальный скроллбар (даже если страница полностью умещается по высоте в экран так вот, при просмотре блока командуем "скрыть прокрутку" -- document.body.style.overflow = 'hidden'; а при закрытии блока снова разрешаем "крутить" всё в принципе понятно, или нет? есть ещё нюансы с определением геометрических размеров обоих <div>'ов и их положения на экране (отцентровка там и прочее) но для вас, я полагаю, это уже мелочи... 1

@timurbegiev 0 / 0 / 0 Регистрация: 04.05.2013 Сообщений: 8
	05.05.2013, 12:25 [ТС]
	0