Появляющийся поверх всего слой

[Sserg-135]

Форумчане, правильно ли я понимаю технологию создания появляющегося слоя в центре странички (например как на этом форуме, когда кликаешь ссылку Регистрация или когда кликаешь на иконки BB кодов при оформлении новой темы ):

Шаг1: Где-нибудь в теле HTML странички (в любом месте по сути?) создаем отцентрированный слой по принципу описанному например в http://htmlbook.ru/l...u-veb-stranitsy со свойством display:none и с нужным содержанием

Шаг 2: на JS пишем коротенкую функцию, которая при клике на ссылку, по которой нужно открыть этот слой, меняет свойство слоя display:visible и ставит z-index 100000, чтобы слой был поверх всего.

Так правильно? или весь слой надо формировать исключительно средствами JS?

И как тогда делается эффект затемнения "нижележащих" слоев? через слой с полупрозрачным фоном, через opacity или полупрозрачныу картинку в фоновом рисунке формата png?А эффект небольшой тени только по периметру слоя?

Буду рад подсказкам :-)

Спасибо

Edited January 31, 2013 by Sserg-135

[npofopr]

Скачайте, например, fancybox и посмотрите на него :-)

А вообще на хабре да и в интеренете много статей было, как сделать модальное окно на чистом html, так и похожее на fancybox

[Sserg-135]

Спасибо за наводки, оказалось не так просто) Хотя и пример со слоем по центру в принципе можно заставить работать

Edited January 31, 2013 by Sserg-135

[Sserg-135]

Такой способ имеет право на жизнь? (код и идея слоя взяты из примеров с этого сайта)http://jsfiddle.net/sjC8A/Или не комильфо?

Правда почему-то при загрузке с первого клика не работает...

Edited February 2, 2013 by Sserg-135

[danik.html]

Правда почему-то при загрузке с первого клика не работает...

Потому что block.style.display изначально - пустая строка. block.style - это то, что назначено непосредственно через атрибут style элемента. Поглядите в DOM-инспекторе, там это прекрасно видно.

[Sserg-135]

Правда почему-то при загрузке с первого клика не работает...

Потому что block.style.display изначально - пустая строка. block.style - это то, что назначено непосредственно через атрибут style элемента. Поглядите в DOM-инспекторе, там это прекрасно видно.

Не совсем понятно почему так выходит. Т.е в данном случае свойство display нужно прописывать непосредственно в тэге <div style='display: none;'> ?

[danik.html]

Не совсем понятно почему так выходит.

Что именно непонятно? Я ж вроде объяснил.

Т.е в данном случае свойство display нужно прописывать непосредственно в тэге <div style='display: none;'> ?

Sserg-135, как вариант...

[Sserg-135]

Потому что block.style.display изначально - пустая строка.

- именно это и не пойму, в стилях же прописано свойство, как-же тогда к нему обратиться, чтобы в тэге не прописывать? Edited February 3, 2013 by Sserg-135

[danik.html]

var computedStyle = window.getComputedStyle( myElement );

А вообще, можете просто при инициализации скрипта выставлять style.display = 'none'. Либо при переключении выставлять display = 'block', если display == '' то значит он скрыт (через css)

Edited February 3, 2013 by danik.html

[Sserg-135]

вот где-то так

http://jsfiddle.net/xLUt7/

[danik.html]

Страшненькая функция вышла. Вот это думаю куда читабельнее и яснее:

function toggleSection(section) {
    //Показ-скрытие блока  
    var block = document.getElementById(section);
    block.style.display = (block.style.display == '') 'block' : '';
}