0

При клике на кнопку всплывает php-форма с полями для заполнения, при еще 1 клике форма закрывается. Нужно, чтобы при клике в любую точку экрана (то есть тег body) эта форма также закрывалось. Но дело в том, что при клике на кнопку "открыть окно" оно всплывает и сразу же закрываеться, так как кнопка лежит внутри body.
Я так понимаю, два события click перебивают друг друга или как-то так.
Пробовал метод not() и добавить туда кнопку - не работает. Как отделить кнопку от body, чтобы ее не задействовало тоже при клике на body? Если можно, то с jquery, пожалуйста.

<div id="edit_open" style=" opacity:0; padding:10px; width:200px; background-color:white; border:1px solid black">
  <form action="" method="post"  autocomplete="on">
      <input type='hidden' name='block_popup' value='1' id='block_popup'>
      <input type="submit" name="send">
  </form>
</div>
<button id="edit">Редактировать пользователя</button>

    $("#edit").click(function() {
                if(!$("#edit_open").is('.show')) {
                    $("#edit_open").css("position", "absolute");
                    $("#edit_open").animate({top:'30%', right:'30%', opacity:'1'}, 1500);
                    $("#edit_open").addClass('show');
                }else{ 
                    $("#edit_open").animate({top:'0%', right:'0%', opacity: '0'}, 1500);
                    $("#edit_open").removeClass('show');

                }
            });

А вот этот кусок, который должен также закрывать окно при клике по экрану:

$('body').click(function() {
            $("#edit_open").animate({top:'0%', right:'0%', opacity: '0'}, 1500);
            $("#edit_open").removeClass('show');
        });
1
  • @Oleg89, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). 27 окт 2014 в 14:30

1 ответ 1

1

При клике на кнопку открытия поставь event.stopPropagation() http://api.jquery.com/event.stoppropagation/

Пример http://jsfiddle.net/e2mcvqb4/

HTML

<div class="settings">
    <button>1234</button>
</div>

JavaScript

$(document).ready(function(){
    $(".settings").click(function(){
        alert('div');
    });
    $(".settings button").click(function(e){
        alert('button');
        e.stopPropagation();
    });
})

CSS

.settings{
    width:100px;
    height:100px;
    border: 1px solid;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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