VPF::появляющийся блок - Форум программистов

Ctulhy

Дата 2.10.2011, 00:03 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: нет
Всего: 2

Код


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'; 
} 
}

есть такой скрипт. при нажатии на ссылку открывается блок, при повторном нажати исчезает.
Как сделать так, чтобы блок исчезал при клике на страницу?

--------------------

скучно в Москве и дождливо в Крыму.

нуп

Дата 2.10.2011, 00:23 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33

Как вариант повесить событие клик на body, и проверять в нём какой элемент его вызвал: если айди элемента != боксу, то надо скрыть бокс. smile

Ctulhy

Дата 2.10.2011, 01:38 (ссылка)

(голосов:2)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: нет
Всего: 2

и здесь, пожалуйста, напишите код
в гугле сложно найти именно то, что нужно.

--------------------

скучно в Москве и дождливо в Крыму.

magelan

Дата 3.10.2011, 09:43 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 3
Всего: 16

Пишется как-то так:

Код


<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>

Это сообщение отредактировал(а) magelan - 4.10.2011, 12:04

Ctulhy

Дата 3.10.2011, 20:24 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: нет
Всего: 2

не работет (

--------------------

скучно в Москве и дождливо в Крыму.

magelan

Дата 4.10.2011, 10:15 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 3
Всего: 16

ну тогда надо еще кнопки проверять

Код


<!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>

Ctulhy

Дата 10.10.2011, 20:06 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: нет
Всего: 2

cпсибо, помогло)

Это сообщение отредактировал(а) Ctulhy - 11.10.2011, 17:30

--------------------

скучно в Москве и дождливо в Крыму.

Ctulhy

Дата 12.10.2011, 01:37 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: нет
Всего: 2

И еще, уж извините меня за приставучесть. Как сделать чтобы при повторном клике блок закрывался?

--------------------

скучно в Москве и дождливо в Крыму.

magelan

Дата 12.10.2011, 10:51 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 3
Всего: 16

Код


var openBox = function ( id )
{
    if( curId == id )
    {
        closeBox( curId );
        return;
    }
    if( curId != null )
        closeBox( curId );
    curId = id;
    document.getElementById( id ).style.display='block'; 
}

Это сообщение отредактировал(а) magelan - 12.10.2011, 10:52

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »