Question

我在我的一个应用程序中有弹出模式。我想在modal外部单击时关闭此弹出窗口。我可以使用javascript实现此行为但我无法找到使用svelte框架使这项工作的方法。现在我正在实现这样的行为

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

但我希望这可以使用svelte。

Answer 1

解决此问题的常用方法是在模式后面放置一个背景元素，覆盖屏幕并截取点击事件：https://svelte.technology/repl?version=1.57.1&example=modal-with-slot

这也是（例如）淡出背景以使模态更加可见的好方法。

另一种方法是使用特殊的<:Window>组件来监听点击次数，并停止在模式中开始的任何点击的传播：https://svelte.technology/repl?version=1.57.1&gist=ba5f8a78263f2cdfbc16b1ae8732da5d

<: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>

在slvel中单击popup外部时关闭模式弹出窗口

1 个答案: