Svelte에서 팝업 외부를 클릭하는 동안 모드 팝업 닫기

Svelte에서 팝업 외부를 클릭하는 동안 모드 팝업 닫기

내 앱 중 하나에 팝업 모드가 있다. modal 외부를 클릭하는 동안 이 팝업을 닫습니다. 나는 자바스크립트를 사용하여 이 동작을 달성할 수 있지만 스벨테 프레임워크를 사용하여 이 동작을 수행할 수 있는 방법을 찾을 수 없다. 지금 나는 이런 행동을 하고 있다

if (e.target.classList.contains('my-modal')){
    e.target.style.display="none";
}

스벨테를 이용해서 작업했으면 좋겠어요.

---

이를 해결하는 일반적인 방법은 화면을 덮고 클릭 이벤트를 가로채는 모달 뒤에 배경 요소를 두는 것이다:

이것은 또한 (예를 들어) 배경을 페이드 아웃시켜 모달을 더 잘 보이게 하는 좋은 방법이다.

또 다른 접근법은 특수 구성요소를 사용하여 클릭을 청취하고 모드 내부에서 시작되는 모든 클릭의 전파를 중지하는 것이다:

<:Window on:click='set({ message: "clicked outside the box" })'/>

<div class='clickzone' on:click='event.stopPropagation()'>
  <div class='inner' on:click='set({ message: "clicked inside the box" })'>
    {{message}}
  </div>
</div>

---

이벤트에 대해서는 이 레포를 확인하십시오:

---

루트 디브에 "onclick" 핸들러를 추가하기만 하면 된다:

<div class="modal" tabindex="-1" on:click={ () => send('CLOSE') }>

저는 XState를 사용하여 'CLOSE' 이벤트를 상태 머신으로 전송합니다. 사람들이 플래그 변수만 사용하는 또 다른 예를 들어 다음과 같이 수행할 수 있습니다:

<script>
  export let open = false;
  export let onClosed;

  const modalClose = () => {
    open = false;
    if (onClosed) {
      onClosed();
    }
  }
</script>

{#if open}
  <div class="modal" on:click={modalClose} >
  ...

Svelte가 자동으로 관리한다고 생각하기 때문에 내부 버튼에 플래그를 추가할 필요는 없었지만, 필요한 경우 모드 로직 내부에 플래그를 추가할 수 있습니다:

<div class="modal-footer">
  <button type="button" class="btn btn-secondary" on:click={modalClose}>
    Close
  </button>
  <button type="button" class="btn btn-primary" on:click|stopPropagation={yourSaveLogic()}>
    Save changes
  </button>
</div>

---

2023년 이후에 이 글을 읽는 사람들을 위해 구문이 대신에 로 업데이트되었다.

<svelte:window on:click='set({ message: "clicked outside the box" })' />