Javascript-форум - Закрытие прозрачного div при щелчке мыши в любой его области

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Закрытие прозрачного div при щелчке мыши в любой его области (https://javascript.ru/forum/dom-window/15004-zakrytie-prozrachnogo-div-pri-shhelchke-myshi-v-lyubojj-ego-oblasti.html)

Закрытие прозрачного div при щелчке мыши в любой его области

Доброго времени суток всем.

Проблемка такая. Есть прозрачный div. В нем непрозрачный текст со ссылками, или допустим непрозрачная картинка являющаяся ссылкой (банер). Также есть кнопка закрыть в углу, которая закрывает прозрачный div. Вопрос такой - как изменить существующий и приведённый ниже код, чтобы div закрывался не только при щелчке по "закрыть" (крестику в верхнем правом углу), но и просто при щелчке в любой области diva - по банеру например, который я туда вставлю? То есть чтобы и окно новое открылось (ссылка с банера), и div закрылся.

код:

<DIV id="mouselayer" align="center" style="z-index:100;left: 50%;height:220px;weight:220px;position:absolute;border:0px solid #333;background-color:transparent">
<DIV id="mouselayer" align="center" style="text-align:right">
<A href="#" onClick="fr.location.href='about:blank';if (document.getElementById) { document.getElementById('mouselayer').style.visibility='hidden'; } else if (document.all) { document.all['mouselayer'].style.visibility='hidden'; } else if (document.layers) { document.layers['mouselayer'].visibility='hide'; };return(false);" 
style="font-size:12px;font-weight:bold;border:none;padding:0 13px" title="закрыть">&times;</A>
</DIV>
<br><br><br>
<p style="font-size:16px;padding:33px;TEXT-ALIGN:justify"><a href="http://google.ru">ссылка</a></p>
<IFRAME src="" name="fr" height="0" width="0" marginwidth="0" marginheight="0" border="0" frameborder="0" scrolling="no"></IFRAME>
</DIV>

<div style="border: 1px solid; width: 100px; height: 100px;" onclick="this.style.display = 'none';"></div>

Спасибо, вы подсказали правильно и ваш пример работает, но видимо есть какая то тонкость, которая не дает правильно работать onclick="this.style.display = 'none'; в моем примере. Не могли бы вы подсказать, как правильно вставить этот обработчик мышиного клика? Как видите, у меня тут два дива - как только ни пробовал, не получается чтобы работало корректно(

Цитата:

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

как только ни пробовал

Покажи как пробовал...

ну например :

<DIV id="mouselayer" align="center" style="z-index:100;left: 50%;height:220px;weight:220px;position:absolute;border:0px solid #333;background-color:transparent" onclick="this.style.display = 'none';" >
<DIV id="mouselayer" align="center" style="text-align:right" >
<A href="#" onClick="fr.location.href='about:blank';if (document.getElementById) { document.getElementById('mouselayer').style.visibility='hidden'; } else if (document.all) { document.all['mouselayer'].style.visibility='hidden'; } else if (document.layers) { document.layers['mouselayer'].visibility='hide'; };return(false);" 
style="font-size:12px;font-weight:bold;border:none;padding:0 13px" title="закрыть">&times;</A>
</DIV>
<br><br><br>
<p style="font-size:16px;padding:33px;TEXT-ALIGN:justify"><a target="_blank" href="http://google.ru">ссылка</a></p>
<IFRAME src="" name="fr" height="0" width="0" marginwidth="0" marginheight="0" border="0" frameborder="0" scrolling="no"></IFRAME>
</DIV>

mav1, если таки закрыть тот див как положено - все убирается...

<!doctype html>
<html>
<head>
<style type="text/css">
</style>
<script>
</script>
</head>
<body>
<DIV id="mouselayer" align="center" style="z-index:100;left: 50%;height:220px;weight:220px;position:absolute;border:0px solid #333;background-color:orange;" onclick="this.style.display = 'none';">
    <DIV id="mouselayer" align="center" style="text-align:right">
        <A href="#" onClick="fr.location.href='about:blank';if (document.getElementById) { document.getElementById('mouselayer').style.visibility='hidden'; } else if (document.all) { document.all['mouselayer'].style.visibility='hidden'; } else if (document.layers) { document.layers['mouselayer'].visibility='hide'; };return(false);"
        style="font-size:12px;font-weight:bold;border:none;padding:0 13px" title="закрыть">&times;</A>
        </DIV>
        <br><br><br>
        <p style="font-size:16px;padding:33px;TEXT-ALIGN:justify"><a target="_blank" href="http://google.ru">ссылка</a>
        </p>
        <IFRAME src="" name="fr" height="0" width="0" marginwidth="0" marginheight="0"
        border="0" frameborder="0" scrolling="no">
        </IFRAME>
    </DIV>
</DIV>
</body>
</html>

Спасибо, друзья. Уже не первый раз получаю помощь на этом форуме! Плюсую вас, дай Бог вам здравия.

mav1, пиши теги прописными буквами...

monolithed,
кста -мучался с подобным-на полностью прозрачном события не срабатывали привязанные к нему. пока его прозрачность не делал отличной от 100%.и непонятно почему так..
в фф