使用AlpineJS与TailwindCSS制作图片模态框遇到异常

问题原因 #

• 你把lightbox事件的监听绑定在了x-if控制的<template>标签上，当关闭模态框（lightbox变为false）时，这个模板会被从DOM中移除，对应的事件监听也跟着消失了，所以再次点击按钮发送事件时，没有元素能接收。
• @click.away里把lightbox设成了空字符串，虽然空字符串是假值，但和初始的布尔类型不统一，容易引发不必要的问题。

修正方案 #

1. 将@lightbox.window事件监听移到外层的x-data所在div上，确保事件监听始终存在于DOM中。
2. 把@click.away里的赋值改成lightbox = false，保持数据类型一致。
3. （可选）给第二个按钮补充imgModalAlt和imgModalDesc参数，避免图片alt属性为空。

修正后的代码 #

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ lightbox: false, imgModalSrc : '', imgModalAlt : '', imgModalDesc : '' }" 
     @lightbox.window="lightbox = true; imgModalSrc = $event.detail.imgModalSrc; imgModalAlt = $event.detail.imgModalAlt; imgModalDesc = $event.detail.imgModalDesc;">
  <button class="block w-24 p-3 mb-4 text-white bg-gray-600 rounded" @click="$dispatch('lightbox',  {  imgModalSrc: 'https://via.placeholder.com/1000x700/066/f0f', imgModalAlt: 'First Image', imgModalDesc: 'Random Image One Description' })">#1</button>
  <button class="block w-24 p-3 text-white bg-gray-600 rounded" @click="$dispatch('lightbox',  {  imgModalSrc: 'https://via.placeholder.com/1000x700/600/099', imgModalAlt: 'Second Image', imgModalDesc: 'Random Image Two Description' })">#2</button>

  <template x-if="lightbox">
    <div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" class="fixed inset-0 z-50 flex items-center justify-center w-full p-2 overflow-hidden bg-black bg-opacity-75 h-100">
      <div @click.away="lightbox = false" class="">
        <img class="" :src="imgModalSrc" :alt="imgModalAlt">
      </div>
    </div>
  </template>
</div>

内容的提问来源于stack exchange，提问作者DeNewGuy