Закрытие всплывающего окна

[tegs89]

Привет всем. С помощью Jquery написан такой код:

При клике на кнопку всплывает 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');
			
			});