появляющийся блок

 
0
 
JavaScript
ava
Ctulhy | 02.10.2011, 01:03

function openbox(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}


есть такой скрипт. при нажатии на ссылку открывается блок, при повторном нажати исчезает.
Как сделать так, чтобы блок исчезал при клике на страницу?
Kommentare (8)
ava
нуп | 02.10.2011, 00:23 #
Как вариант повесить событие клик на body, и проверять в нём какой элемент его вызвал: если айди элемента != боксу, то надо скрыть бокс. smile
ava
Ctulhy | 02.10.2011, 01:38 #
и здесь, пожалуйста, напишите код
в гугле сложно найти именно то, что нужно.
ava
magelan | 03.10.2011, 09:43 #
Пишется как-то так:

<script type="text/javascript">
var curId = null;

var closeBox = function( id )
{
document.getElementById( id ).style.display='none';
curId = null;
}

var openBox = function ( id )
{
if( curId != null )
closeBox( curId );
curId = id;
document.getElementById( id ).style.display='block';
}
var testId = function( id, obj )
{
while( obj )
{
if( obj.id == id )
return true;
obj = obj.parentNode;
}
return false;
}

document.onclick = function( e )
{
if( curId == null )
return;

e = e || window.event;
obj = e.srcElement || e.target;

if( !testId( curId, obj )) /* Проверяем, не кликнули ли мы в том блоке, который открыт */
closeBox( curId );
}
</script>
ava
Ctulhy | 03.10.2011, 20:24 #
не работет (
ava
magelan | 04.10.2011, 10:15 #
ну тогда надо еще кнопки проверять

<!DOCTYPE html>
<html>
<head>
<title>Светит незнакомая звезда</title>
<style type="text/css">
HTNL, BODY {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
var curId = null;
var closeBox = function( id )
{
document.getElementById( id ).style.display='none';
curId = null;
}
var openBox = function ( id )
{
if( curId != null )
closeBox( curId );
curId = id;
document.getElementById( id ).style.display='block';
}
var testBox = function( box, obj )
{
while( obj.tagName != 'HTML' )
{
if( obj.getAttribute( 'box' ) == box )
return true;
obj = obj.parentNode;
}
return false;
}
document.onclick = function( e )
{
if( curId == null )
return;
box = document.getElementById( curId ).getAttribute( 'box' );
e = e || window.event;
obj = e.srcElement || e.target;
if( !testBox( box, obj )) /* Проверяем, не кликнули ли мы в том блоке, который открыт */
closeBox( curId );
}
</script>
<input box="box_tool_1" type="button" value="Клац ми" onclick="openBox( 'd1' )" /><br/>
<div box="box_tool_1" id="d1" style="position: absolute; left: 100px; top: 10px; border: 1px solid red; display: none">Не работает?</div>
<input box="box_tool_2" type="button" value="Клац ми ту" onclick="openBox( 'd2' )" />
<div box="box_tool_2" id="d2" style="position: absolute; left: 150px; top: 40px; border: 1px solid gold; display: none">Совсем не работает?</div>
</body>
</html>
ava
Ctulhy | 10.10.2011, 20:06 #
cпсибо, помогло)
ava
Ctulhy | 12.10.2011, 01:37 #
И еще, уж извините меня за приставучесть. Как сделать чтобы при повторном клике блок закрывался?
ava
magelan | 12.10.2011, 10:51 #

var openBox = function ( id )
{
if( curId == id )
{
closeBox( curId );
return;
}
if( curId != null )
closeBox( curId );
curId = id;
document.getElementById( id ).style.display='block';
}
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
  Ctulhy   нуп   magelan
advanced
Absenden