토글 레이어 외부영역 닫기 채택완료

많은 조언으로 구글링해서 적용후 정상작동까지 확인했구요

부가적으로 이것저것 함수를 넣었더니 

button1만 클릭해야 #div1과 #layer_backgroud 두아이디가 display : block 과 none이 되고있어요

#div1 레이어 영역을 제외한 밖의 #layer_backgroud 아이디를 클릭해도 block과 none이 되게 하고싶어서요 혹시 어디부분을 수정해야할까요?

해당부분 구글링으로 찾아보니 mouseup를 말씀해주셔서 적용해보니 정상적으로 적용은되지만

button1부분에 addClass부분은 적용이 안되네요

<input class="button1">

<div id="div1">

 내용

</div>

<div id="layer_background"></div>

#layer_background의 스타일은 밑에 스타일로 적용했어요~!

#layer_background {  

    display:none;

    position:fixed;  

    left: 0;

    top: 0;

    z-index: 1001;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.5);

    }

$(document).ready(function(){
   $('#div1').hide();
   $('.button1').toggle (
    function(){
     $('#div1').show();
     $('#layer_backgroud').show();
     $(".button1").addClass("active");
    },
    function(){
     $('#div1').hide();
     $('#layer_backgroud').hide();
     $(".button1").removeClass("active");
    }
   );
  });