Javascript 使用Alpine.js在一个页面上创建两个模态

我在一个页面上创建了两个模态，但我在如何使其工作方面遇到了问题。我刚刚复制了示例，并将其转换为如下函数：

function isDialogOpen() {
    return {
        modal: false,
        open() { this.modal = true;document.body.classList.add("modal-open"); },
        close() { this.modal = false;document.body.classList.remove("modal-open"); },
        isOpen() { return this.modal === true },
    }
}

这两个模态被包装在

元素中

<main class="assignedquestion"  x-data="isDialogOpen()" @keydown.escape="close">

不幸的是，它不起作用。只有第一个模态出现。
这些模式将由两个不同的按钮触发

下面是我的情态动词的标记：

第一模态

<!-- overlay -->
<div
    class="overflow-auto"
    style="background-color: rgba(0, 0, 0, 0.75);display:none"
    x-show="isOpen()"
    :class="{ 'user-history-modal': isOpen() }"
>
  <!-- dialog -->
  <div
       class="bg-white shadow-2xl"
       x-show="isOpen()"
       @click.away="close"
  >
      <div class="modal-header">
         <h3>Reassign Ticket</h3>
          <button type="button" @click="close"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L1 13M1 1l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
      </div>
      <div class="modal-content">
        
      </div>
  </div><!-- /dialog -->
</div><!-- /overlay -->

<!-- overlay reassignDialog -->
<div
    class="overflow-auto"
    style="background-color: rgba(0, 0, 0, 0.75);display:none"
    x-show="isOpenReassign()"
    :class="{ 'reassign-history-modal': isOpenReassign() }"
>
  <!-- dialog -->
  <div
       class="bg-white shadow-2xl"
       x-show="isOpenReassign()"
       @click.away="closeReassign"
  >
      <div class="modal-header">
         <h3>Reassign Ticket</h3>
          <button type="button" @click="closeReassign"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L1 13M1 1l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
      </div>
      <div class="modal-content">
        
      </div>
  </div><!-- /dialog -->
</div><!-- /overlay -->

重新分配票证

第二模态

<!-- overlay -->
<div
    class="overflow-auto"
    style="background-color: rgba(0, 0, 0, 0.75);display:none"
    x-show="isOpen()"
    :class="{ 'user-history-modal': isOpen() }"
>
  <!-- dialog -->
  <div
       class="bg-white shadow-2xl"
       x-show="isOpen()"
       @click.away="close"
  >
      <div class="modal-header">
         <h3>Reassign Ticket</h3>
          <button type="button" @click="close"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L1 13M1 1l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
      </div>
      <div class="modal-content">
        
      </div>
  </div><!-- /dialog -->
</div><!-- /overlay -->

<!-- overlay reassignDialog -->
<div
    class="overflow-auto"
    style="background-color: rgba(0, 0, 0, 0.75);display:none"
    x-show="isOpenReassign()"
    :class="{ 'reassign-history-modal': isOpenReassign() }"
>
  <!-- dialog -->
  <div
       class="bg-white shadow-2xl"
       x-show="isOpenReassign()"
       @click.away="closeReassign"
  >
      <div class="modal-header">
         <h3>Reassign Ticket</h3>
          <button type="button" @click="closeReassign"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L1 13M1 1l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
      </div>
      <div class="modal-content">
        
      </div>
  </div><!-- /dialog -->
</div><!-- /overlay -->

重新分配票证

这里的解决方案是将每个模式作为一个单独的组件，并向它们发送自定义事件以打开/关闭它们。这样，它们将是分开的，您将能够独立地关闭它们。如果一次只能打开一个情态动词，您应该添加

@toggle-reaassign-modal.window=“close（）”

到对话框模式（第一个模式）和

@toggle-modal.window=“close（）”

到重新分配模式（第二个模式），以便在打开另一个模式时始终关闭

要触发模态打开，可以使用以下命令：

切换模式
切换重新分配模式

---

您可以将其视为一个简单的代码笔。

您可以创建一个简单的代码笔吗？我无法在我这端运行它。这是我尝试的。我已经分叉并更新了你的代码笔和我的答案以匹配，请在查看。你能告诉我我错过了什么吗？顺便说一句，我正在标记这个答案。谢谢

不在Alpine组件内，向其中添加

x-data

可修复该问题