带有 Tailwindcss 和 Alpine JS 的模态

Posted 2023-03-07

【中文标题】带有 Tailwindcss 和 Alpine JS 的模态

【英文标题】：Modal with Tailwindcss and Alpine JS

【发布时间】：2021-12-17 20:07:02

【问题描述】：

我正在尝试为我的 Phoenix LiveView 项目实现一个模式。但是遇到了一个问题 - 我的模式在屏幕上，但我仍然可以使用选项卡与页面上的元素进行交互。这是我的tailwindcss代码有问题吗？要打开我的模式，我使用以下路线：“user/change_email”。并且我的 LiveView 模态保持显示状态

<div>
  <div id="#@id"
  phx-hook="Modal"
  x-data=" open: #@show "
  x-init="() => 
              $nextTick(() => $refs.modalRightButton.focus())
              $watch('open', isOpen => 
                console.log('WATCH OPEN = ' + isOpen)
                if (!isOpen) 
                  modalHook.modalClosing(#@leave_duration)
                
              )
            "
  @keydown.escape.window="if (connected) open = false"
  x-show="open"
  x-cloak>
  <div class="z-50 fixed bottom-0 inset-x-0 px-4 pb-4 sm:inset-0 sm:flex sm:items-center sm:justify-center">
  <!-- BACKDROP -->
  <div x-show="open"
      x-cloak
      x-transition:enter="ease-out duration-#@enter_duration"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="ease-in duration-#@leave_duration"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
      class="fixed inset-0 transition-opacity">
   <div class="absolute inset-0  #@background_color #@background_opacity"></div>
  </div>
  <div x-show="open"
      x-cloak
      @click.away="if (connected) open = false"
      x-transition:enter="ease-out duration-#@enter_duration"
      x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
      x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
      x-transition:leave="ease-in duration-#@leave_duration"
      x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
      x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
      class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-headline"
      aria-describedby="modal-description">
   <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
     <div class="sm:flex sm:items-start">
       <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
       <!-- SVG el -->
         <svg class="h-6 w-6 text-red-600"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
           <path stroke-linecap="round"
                 stroke-linejoin="round"
                 stroke-
                 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.  333.192 3 1.732 3z" />
         </svg>
       </div>
       <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
         <h3 class="text-lg leading-6 font-medium #@title_color"
                   id="modal-headline">
                     <%= @title %>
                   </h3>
         <div class="mt-2">
           <p class="text-sm leading-5 #@body_color"
              id="modal-description">
             <%= @body %>
           </p>
         </div>
       </div>
     </div>
   </div>
   <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
     <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
       <button type="button"
               phx-click="right-button-click"
               phx-target="#@id"
               class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-#@right_button_color-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-#@right_button_color-500   focus:outline-none     focus:border-#@right_button_color-700 focus:shadow-outline-#@right_button_color transition ease-in-out  duration-150 sm:text-sm sm:leading-5"
               x-ref="modalRightButton"
               @click="if (connected) open = false">
         <%= @right_button %>
       </button>
     </span>
     <%= if @left_button != nil do %>
     <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
       <button type="button"
               phx-click="left-button-click"
               phx-target="#@id"
               class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5"
               @click="if (connected) open = false">
         <%= @left_button %>
       </button>
     </span>
     <% end %>
   </div>
  </div>
  </div>
  </div>
  <template id="connection-#@id" phx-hook="ConnectionStatus"></template>
  </div>

【参考方案1】：

您的 CSS 没有问题。 Alpine.js 可以使用 Trap 插件为您处理这个问题：https://alpinejs.dev/plugins/trap

在您的示例中，类似于：

 <div
   ...
   x-show="open"
   x-trap.inert.noscroll="open"
   ...>