0

Добрый день! У меня к вам вопрос. Все чаще я встречаю на сайтах многооконные варианты страниц, где по нажатию какой-то ссылки выскакивает второе окно, в котором можно тоже что-то делать (например печатать текст, выбирать ссылки). При этом скроллер мыши реагирует только на главное окно, осуществляя на заднем фоне делать прокрутку страницы. С помощью чего это можно добиться? Стандартными средствами HTML+CSS или же требуется применение JavaScript?

Привожу скрин, многооконности в контакте: alt text

4 ответа 4

3

Для элемента применяются стили position равные absolute или fixed. Изменение размера окна происходит через js и изменения свойства height и width. Аналогично перемещение окна. Свойства left и top.

3

Идея следующая:

  1. Создаем div на весь экран (JS + CSS), полупрозрачный (CSS), отключаем скролинг (возможно JS), позиция absolute (CSS), если мы щелкаем на нем, то выходим из этого режима, т.е. закрывается div 2 (JS)
  2. Создаем div поверх 1-го div-а (JS), который вызывает ощущение 2-го окна, который можно перетаскивать (JS)
2

Js нужен, без него будет тяжко. Загляните в jquery UI. Там все базовые элементы, типа диалоговых окон есть.

2
1

Я как-то делал пример модальных окон, вот: drag and drop html javascript

По сути вам остается скачать плагин mousewheel для jquery и навесить обработчик события на окно.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.