如何使用水平滚动使模态对话框覆盖应用程序页面？

Question

基于tailwindcss 2模态示例https://alpinetoolbox.com/examples/modal 我在我的 tailwindcss 2、Alpinejs 2 应用程序中使用模态对话框，它对我有用除非我在水平滚动的页面上使用大量数据。在这种情况下模态对话框只覆盖了屏幕的可见部分，这是不好的。

我尝试了一些方法来将模态的高度设置为全高，例如：

<!--Overlay-->
<div class="overflow-auto w-full h-full" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'absolute inset-0 z-10 flex items-center justify-center': showModal }">

但是失败了。

请检查一下笔：https://codepen.io/petrogromovo/pen/yLMNVLr

Answer 1

您可以简单地将叠加层 div 上的位置 absolute 替换为 fixed。

<div 
    class="overflow-auto w-full h-full" 
    style="background-color: rgba(0,0,0,0.5)" 
    x-show="showModal" 
    :class="{ 'fixed inset-0 z-10 flex items-center justify-center': showModal }"
>

如何使用水平滚动使模态对话框覆盖应用程序页面？

How make modal dialog covering app page with with horizontal scrolling?

css

tailwind-css

alpine.js