如何使用水平滚动制作覆盖应用页面的模态对话框？答案

【问题标题】：How make modal dialog covering app page with with horizontal scrolling?如何使用水平滚动制作覆盖应用页面的模态对话框？
【发布时间】：2021-07-30 22:27:46
【问题描述】：

基于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

【问题讨论】：

标签： css tailwind-css alpine.js

【解决方案1】：

您可以简单地将位置absolute 替换为覆盖div 上的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 }"
>

【讨论】：