0

Доброго времени друзья!Есть вот такая форма:

<div class="box"><div class="podbox"><div class="podpodbox"><table><th>Мы позвоним вам сами</th><tr><td>Ваше имя :</td></tr><tr><td><input type="text" id="obratName" /></td></tr><tr><td>Ваш номер :</td></tr><tr><td><input type="text" id="obratPhone" /></td></tr><tr><td><input type="button" value="Готово" id="obratBut"/></td></tr></table></div><p><a href="'+link+'">Заказать обратный звонок</a></p></div></div>

Вот ее стили:

    .box{
        width:220px;
        height:40px;
        position:absolute;
        left:0px;
        border-top-right-radius:5px;
        border-bottom-right-radius:5px;
        box-shadow:0 8px 13px rgba(0,0,0,.2);
        background:linear-gradient(#6044dd,#aaa8f9);
        font-size:12px;
        font-family:Verdana, Helvetica, sans-serif;
    }
    .podbox{
        width:90%;
        height:100%;
        margin:0 auto;
        padding:0px 5%;
        text-align:center;
        position:relative;
    }
    .podpodbox{
        position:absolute;
        width:98%;
        height:200px;
        margin-left:-11px;
        background:#aaa8f9;
        z-index:-5;
        overflow:hidden;
    }
    .podpodbox table{
        margin:50px auto;
    }
    .podbox p{
        margin:0;
        padding:0;
        line-height:40px;
        width:100%;
    }
    .podbox a {
        text-decoration:none;
        color:#FFF;
    }

Вот скрипт который по нажатию на class="box" показывает .podpodbox

    $(document).ready(function(){
    //Ссылка
    var link = "#";
        $('.podpodbox').hide();
        $('.box').click(function (){
            $('.podpodbox').fadeTo(300, 1);
        });
            $('#obratBut').click(function(){
                $('.podpodbox').hide();
            });
    });

Там есть кнопка #obratBut по нажатию на нее элемент должен исчезать а он исчезает и появляется! собственно в этом загвоздка.

2 ответа 2

1

Может так:

$('#obratBut').click(function(e){
    $('.podpodbox').hide();
    e.stopPropagation();    
});

Я имею в веду, может он появляется от того, что click на родителе происходит.

0
0

Так будет работать, http://jsfiddle.net/vhe28/2/

$(document).ready(function () {
    //Ссылка
    var link = "#",
        $podpodbox = $('.podpodbox'),
        $obratBut = $('#obratBut');
    $podpodbox.hide();
    $('.box').click(function (e) {
        e.preventDefault();
        $podpodbox.fadeTo(300, 1);
    });
    $obratBut.click(function (e) {
        e.stopPropagation(); //не поднимать событие вверх
        $podpodbox.hide();
    });
});

, но лучше повесить событие непосредственно на заголовок бокса: http://jsfiddle.net/vhe28/1/

$(document).ready(function () {
    //Ссылка
    var link = "#",
        $podpodbox = $('.podpodbox'),
        $obratBut = $('#obratBut');
    $podpodbox.hide();
    $('#header').click(function (e) {
        e.preventDefault();
        $podpodbox.fadeTo(300, 1);
    });
    $obratBut.click(function () {
        $podpodbox.hide();
    });
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.