【问题标题】: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 }"
    >
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-11-12
      • 1970-01-01
      • 2015-06-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-11-10
      相关资源
      最近更新 更多