VPF::jquery, всплывающие окна - Форум программистов

Ripper

Дата 23.12.2011, 23:26 (ссылка)

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

Загрузка ...

Lonely soul...

Профиль
Группа: Участник
Сообщений: 920
Регистрация: 30.6.2004
Где: г. Москва

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

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

Такая проблема - нужно сделать по кликну на иконку всплывающее окно. Если кликаем еще раз - оно гаснет. Если кликаем по любому элементу на странице - оно тоже гаснет.

И еще клик на иконку должен быть live, т.к. иконка подгружается в процессе.

Попытка:

Код


    var anyWindowsShown = false;

    function clearScreen() {
        // удаляем все открытые окна
        anyWindowsShown = false;    
    }

    $('body').click (function() {
        if (anyWindowsShown == true) clearScreen();  
    });
        
    $(".infoBox").live('click', function(e) {
        if (anyWindowsShown == false) {
            anyWindowsShown = true;
                       // показываем окно 
                } else {
                      anyWindowsShown = false;
                      // Гасим окно
                }

Но проблема в том, что когда кликаешь на иконку, то вызывается событие клика и на иконку и на body, и оно гаснет и снова появляется. Читал про stopPropagation но оно не работает для live =\

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

"Он знает: надо смеяться над тем, что тебя мучит, иначе не сохранишь равновесия, иначе мир сведет тебя с ума" - Над кукушкиным гнездом

ksnk

Дата 23.12.2011, 23:55 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

Код


$('body').click (function(event) {
        if($(event.target).is(".infoBox")){
            if (anyWindowsShown == false) {
            anyWindowsShown = true;
                       // показываем окно 
                } else {
                      anyWindowsShown = false;
                      // Гасим окно
                }
        } else
        if (anyWindowsShown == true) clearScreen();  
    });

Можно даже и без лива обойтись.

Можно по клику на .infoBox поставить таймаут на 10 ms и пока не тикнет таймаут - не гасить окна в клике по body.

Хотя как-то странно, что stopPropagation не работает. Вроде должен....

Это сообщение отредактировал(а) ksnk - 23.12.2011, 23:56

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

krundetz

Дата 24.12.2011, 00:33 (ссылка)

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

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

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

Ripper, а может стоит взять готовое решение? подогнать только дизайн.

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

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

Leshak

Дата 24.12.2011, 16:32 (ссылка)

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

Загрузка ...

Шустрый

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

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

Во-первых - не надо навешивать событие на body - чрева-то...

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

1 - изначально создаем div размером во все окно, отрицательным z-index и visibility = hidden' и умением при клике по нему, закрывать окошко над собой и себя
2 - при нужном клике делаем наш div видимым, а над ним показываем всплывающее окно

вот..

и в качестве бонуса - нашему div можно нагрузить какой-нибудь фон и полу прозрачность...

Это сообщение отредактировал(а) Leshak - 24.12.2011, 16:34

ksnk

Дата 24.12.2011, 18:40 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

Цитата(Leshak @ 24.12.2011, 16:32

)

Во-первых - не надо навешивать событие на body - чрева-то...

Чем, например?

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Ripper

Дата 25.12.2011, 01:53 (ссылка)

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

Загрузка ...

Lonely soul...

Профиль
Группа: Участник
Сообщений: 920
Регистрация: 30.6.2004
Где: г. Москва

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

ksnk, твой метод отлично работает, спасибо! Только вот я не что-то не могу пофиксить такую вещь - когда мы кликаем на само окошко, оно не должно закрываться.
окно соотвественно div, внутри какие то элементы типа таблиц кнопок итп. Ну я поставил еще условие else if($(e.target).is("#infoBox")) alert('infobox'); но оно срабатывает когда кликаешь именно по диву, а если например по таблице внутри то не срабатывает и окно закрывается

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

ksnk

Дата 25.12.2011, 09:03 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

e.target указывает непосредственно на элемент, на который кликает мышка. Нужно проверять его, и список его парентов

Код


 if( $(e.target).parents("#infoBox").andSelf().is("#infoBox")) alert('infobox');

Это сообщение отредактировал(а) ksnk - 25.12.2011, 10:22

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Leshak

Дата 25.12.2011, 11:25 (ссылка)

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

Загрузка ...

Шустрый

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

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

ммммм...
Мой вариант игр с подложкой smile

Код



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>тест Close Block</title>

    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>    
    <style> 

        body {
            font:15px/1.5 arial,helvetica,clean,sans-serif; 
            font-weight: bold;
        }    

        #all {
            background-color: #ffffff;    
            z-index: 1;
            opacity: 1;
            width: 99%;
            height: 99%;
        }
        
        #mmain {
            position: absolute;
            display: block;
            top: 22px;
            life: 22px;
            width: 333px;
            height: 333px;
            border: solid 2px #333399;
            background-color: #ffffff;    
            color: #333399;
            padding: 10px;
            margin: 10px;
        }
        
        #close { 
            position: absolute;
            top: 0px;
            left: 0px;
            display: none; 
            width: 99%;
            height: 99%;
            z-index: -11;
            opacity: 0.7;
            background-color: #555555;    
        }
        .c { 
            cursor: pointer; 
            position: absolute;
            display: block-inline;
            left: 111px;
            border: solid 2px #ee6633;
            color: #ee6633;
            width: 111px;
            padding: 5px;
            margin: 0px;
        }

        .show {
            position: absolute;
            display: none;
            top: 11px;
            left: 222px;
            width: 333px;
            height: 333px;
            border: solid 2px #aa3333;
            background-color: #ff9933;    
            color: #3333ff;
            padding: 10px;
            margin: 10px;
            z-index: -22;
        }
        #c1 { top: 55; }
        #c2 { top: 111; }
        
    </style>
</head>
<body >    
<div id="all" ></div>
    <div id="mmain" ><b>тест Close Block Position</b>
        <div id="c1" class="c"> open </div>
        <div id="c2" class="c"> ups </div>

    </div>      
<div id="close" ></div>
<div id="show" class="show"></div>
<script language="JavaScript">

    $('#close').click( function(){
        $('#show').css('z-index','-22');
        $('#show').css('display','none');
        $('#show').html('');
        $('#close').css('z-index','-11');
        $('#close').css('display','none');
    });
    
    $('#c1').live('click', function (){
        $('#close').css('z-index','11');
        $('#close').css('display','block');

        $('#show').html(
        '<br>'
        +'<br><a href="http://www.walks.ru/" target="new">www.walks.ru<br><br>'
        +'<img src="http://www.walks.ru/stdt/petersburg/piter05/Piter05_09_108m.jpg" />'
        +'</a>'
        );
        $('#show').css('z-index','22');
        $('#show').css('display','block');
    });

    $(function(){
        $('.c').click( function(){
            $(this).siblings().css('text-decoration','none');
            $(this).css('text-decoration','underline');
        });
        
        $('#c2').click( function(){
            alert('UPS');
        });
        
        
    });
</script>
</body>
</html>

Цитата(ksnk @ 24.12.2011, 18:40

)

не надо навешивать событие на body - чрева-то...

Чем, например?

Даже и не вспомню сейчас - просто были проблемы с неконтролируемыми событиями

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