모달을 만들고 배경을 적당히 어둡개하고

닫기 버튼 따로 만들어서 닫기 적용하는 경우도 있는데,

간혹 어두운 배경 클릭해도 닫게 해달라는 요청이 있을수 있습니다.

그럼 고민스러운 것이

배경이라는게, 영역이라서 배경위에 추가로 레이어를 뛰운경우

배경따로 레이어 따로 이렇게 구분을 해줘야합니다.

 

일반 js로는 요란을 피워야합니다.

그런데 이게 자주 사용하는 기능으로 분류되었는지

svelte 에서는 간단하게

<button. on:click|self={()=>{modalOpen != modalOpen}} >

 

이렇게 on:click 뒤에 |self 를 붙여주면 다른거 클릭 안되고 나만 클릭되에해줍니다.

그래서 레이어 위아래로 겹치는 경우에도 다른레이어 클릭하더래도 분리되어 클릭되지 않습니다.