Здравствуйте.
Задача:

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

вопросы:
1) Как его убрать при нажатии в любом другом месте страницы?
2) Насколько кроссброузерен и универсален данный вариант?
3) В правильном ли я двигаюсь направлении при решении данной задачи?



Заранее спасибо.

<body onclick="document.getElementById('s1').style.visibility='hidden'">

bars80080, спасибо тебе большое. Постоянно выручаешь. 
Но я так пробовал уже, не работает. Див вообще не раскрывается при нажатии на кнопку. Кнопка же тоже в теле документа находится.
К тому же что делать если таких кнопок с дивами будет несколько и разных?

Это сообщение отредактировал(а) Wheels - 10.11.2008, 17:02

может вообще идея крамольная с боди, но если всё же с ним, то <body onclick="prov();">

а в функции prov(); во-первых проверка какие дивы открыты и их закрытие (просто при открытие дива в общем массиве менять значение флага, а потом проверять в цикле)



но скорее всего выход такой: 
твой див - это слой, растягивающийся на весь экран, в середине окошко, которое тебе нужно, всё остальное - прозрачный слой, по которому можно осуществить клик. при этом можно даже задать не прозрачный слой, а фон в виде полупрозрачного png, тогда будет красивое затенение сайта

Спасибо! )

Ой...
Можно хоть как-нибудь в примере, пожалуйста?
Я же в раздел для начинающих пишу =)

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


Это сообщение отредактировал(а) Wheels - 10.11.2008, 17:49

самое простое - заготовить такой слой заранее. располагаться он должен перед </body> и желательно иметь нужные характеристики. т.е. растянут по всей ширине с помощью css. только быть невидимым:



конечно, тут возможны подводные камни в зависимости от ситуации.

по нажатию кнопки просто берётся разметка нужного тебе окна и вставляется в qw, затем он открывается:

это конечно жутко упрощённо. но хотя бы идея

Во, наваял:...выглядит пример конечно отстойно, но... работает 

Michael.de, спасибо огромное, но к сожалению это не совсем то, что мне нужно =((


bars80080, Во, как раз так! Вроде разобрался... мне нравится и даже в разных броузерах работает ) Только 1 нюанс остался... 
Как открываемый див к "родительской" кнопке прилепить? Пробовал по-всякому, но какая-то белеберда получается, все зависимости от местоположения и дива и кнопки в коде. Нужно координаты кнопки узнавать? Или можно приемами верстки ограничиться? У меня уже дошло до маразма ;) &nbsp; и nobr =)))

нет, но если ты имеешь возможность затенить всю страницу, то див тупо должен быть в центре

насчёт определения координат элемента (кнопки), то можно посмотреть здесь http://xhtml.ru/2006/08/23/cursor-coordinates/
там есть пару функций: 
которые можно подкорректировать под свои задачи

Как так? И координаты кнопки не придется узнавать? Меня этот вариант наверное устроил бы. Т.е. тот, что проще.  Только я тебя не очень понимаю... что значит в центре?  А если кнопок много? А если дизайн страницы "резиновый"? Я, наверное, не совсем суть самой идеи понимаю от того, что не имею в голове представления КАК это будет работать =((

В любом случае - спасибо за ссылку, буду разбираться пока что.

Это сообщение отредактировал(а) Wheels - 11.11.2008, 11:29

ну смотри. когда у тебя вылетает alert(), то ничего кроме как на его конпку на странице ты нажать не можешь. если у тебя див с сообщением открывается и приэтом любое нажатие на остальную часть страницы вызывает его закрытие, то самое логичное - разместить его в центре, и при этом затенить страницу (в иделае, она должна поблекнуть - png полупрозрачный поверху)

Ясно. Т.е. в любом случае Див будет по центру.  Но он нужен прямо от кнопки, где бы она ни находилась, как на изображении. Нужно пробовать разместить его, узнав координаты верхнего левого угла кнопки, так? Или есть другие способы добиться этого?

В результате размышлений и пары экспериментов я пришел к выводу, что нужно иметь див фиксированной высоты, так? С прокруткой... Ведь, его левый нижний угол нужно "прилепить" левому верхнему углу кнопки...   А на тот случай, если див широкий, а кнопка у самого правого борта страницы - еще и фиксированную ширину дива, что бы не уезжал за край страницы, а отъехал влево немного.

Я правильно размышляю?

Это сообщение отредактировал(а) Wheels - 11.11.2008, 21:13

чёрт его знает. сделай чёнибуть. а там посмотришь, нравится или нет

Сделал. Не нравится =(

При появлении дивов возникает вертикальная и/или горизонтальная прокрутка на странице. Не знаю как от нее избавиться.
С чем это связано? 
В IE дивы закрываются "через раз". При клике на кнопку закрываются на сотый раз, если вообще закрываются.
В чем тут проблема?

И еще не могу понять как сделать id кнопкам такого вида: butt[0]; а в функциях    findPosX(document.getElementById(x)); вместо x писать butt[x]. Но тут просто с синтаксисом не разобрался...

Я вообще не понимаю, как эта конструкция работает в лисе и опере (имею ввиду ф-цию closeqw() и её вызов в 36 строчке)...но работает 
Я бы сделал как в моём примере: глоб. массив для кнопок, вначале содержащий все элем. false. При клике меняешь соотв. кнопке элемент: clicked[el]=!clicked[el]; --> отпадает потребность в 2х функциях: openqw() и closeqw() --> вместо них использ. только одну, в которой, в завис. от знач. (true or false) показываешь или скрываешь инфу.

Во первых (если не ошибаюсь) id не может начинаться с цифры (быть ею).
Если я тебя правильно понял: пишешь в HTML: id='blabla0', получаешь элемент: var el=document.getElementById('blabla0'); и его id: var id=el.id; А дальше используешь след. констр.: var tvoj_x=parseInt(id.substr(6)); 6 - кол-во отрезаемых символов с начала id (blabla).

Michael.de, в твоем примере нельзя закрыть див по клику в любом месте страницы. =((   Именно для этого наворочена функция closeqw()

  

не, в функцию openqw(x, hei); и так уже пошел уникальный параметр x. 
Вот я и хочу сделать id такого вида <input type=button value="Нажми" onclick="openqw(1, 100)" id="butt[1]">, чтобы внутри функции всегда можно было написать butt[x].

Похоже, что единственного правильного решения нету =( Прокрутку и глюки в ИЕ так и не убрать(

Добавлено через 12 минут
нашел причину прокрутки: я присваивал координаты главному диву, который во все окно, вместо того, что бы присвоить маленьким.

Это сообщение отредактировал(а) Wheels - 12.11.2008, 10:21

Вроде все здОрово, но залипания в ie остались... 
с чем это связано?

Все! Вилы =( 
Поставил строчку DOCTYPE Strict и FF напрочь отказался показывать дивы по координатам, стал показывать в левом верхнем углу экрана. В то время, как IE на координаты реагирует нормально, однако выборочно реагирует на клики для закрытия дивов.

Уважаемые, помогите пожалуйста.



Спасибо!

Это сообщение отредактировал(а) Wheels - 12.11.2008, 22:36

Т.е. ты хочешь показывать див при нажатии на соотв. кнопку, а закрывать при клике на боду???

Может тебе нужна внутри ф-ции ссылка на элемент, с которого её вызвали?this можешь передать как 3й параметр...

P.S. А ты мой пример только запускал, или ещё и посмотрел, как код работает?

Да, необходимо чтобы див закрывался по клику в любом месте документа, на любом объекте, даже если на сам этот див ткнуть, вот в чем дело.

А открывался только от клика по кнопке/картинке (не суть). Только торчать див должен точнехонько из этой самой кнопки/картинки.



Да с этой-то мелочью я уже разобрался) Кавычки не там ставил просто. В любом случае - спасибо. 


Я не только посмотрел, я его еще и мучил долго =((

Ну я не поленился и тоже его "помучил" 

1. не понял фразу "Очень хочется вынести контейнеры сюда"
2. Ты говоришьт.е. онклик на закрытие нужно ставить на боди (логично?). Я поставил и обнаружил, что если ты кликаешь где угодно (даже по кнопке), у тебя срабатывает этот онклик (закрытие). Замени в мной приведённом коде аналогичные строчки на следующие:ты видишь, что при клике по кнопке див отображается, но... тут же пропадает. Спросишь "почему?" --> см. содержимое алерта. Как это обойти? У меня одна мысль: для каждой кнопки находишь её высоту и ширину. При клике по боди сравниваешь координаты клика с коорд. полученных прямоугольников. Кликнул по кнопке (по прямоугольнику) - не закрываешь подсказки ... как-то так:Сам доделаешь? 

Похоже, что необходимости изврата с координатами нет. Знающие люди подсказали о существовании таких вещей, как Propagation(); preventDefault(); и cancelBubble();

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

Истина где-то рядом!



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

Ну наконец-то!!! Еще немного поколдовал и все заработало! Огромное спасибо всем, кто помог!

Вот результат:

Если кто-нибудь заметит ошибки - пишите.
Еще раз спасибо.