时间戳

首页 > 解决方案 > 模态弹出窗口功能正常，但在 safari 中不可见。使用 Creative Tim 材质 ui 仪表板内置 React

javascript - 模态弹出窗口功能正常，但在 safari 中不可见。使用 Creative Tim 材质 ui 仪表板内置 React

问题描述

我正在为我的工作创建一个内部项目，我们决定添加一个模式弹出窗口以允许用户提交错误报告或功能请求。一切都在 Chrome（ios 和 windows）中完美运行，在 Firefox 中也能正常运行。

但是，在 ios 的 Safari 中，模式实际上并没有显示。实际的模式仍然可以使用和提交，如果你知道点击哪里或者如果你在检查器中查看它会显示它在屏幕上的位置，一切都会起作用。以下是一些显示问题的屏幕截图。最上面的是它在 Chrome 中运行，最下面的是它在 Safari 中运行。

在此处输入图像描述

在此处输入图像描述

所以因为我仍然能够在 Safari 中提交表单，所以它让我相信一些不应该的事情：

我已经对事物的定位进行了一些调查，因为我知道（超级旧）版本的浏览器有时会使孩子的位置固定，而父母的位置相对等情况会变得很奇怪。

在 10 多年的 Web 开发中，我从未见过这样的事情，所以我很想找到这个问题，并想知道是否有人有一些想法可以尝试。

谢谢！

标签： javascriptcssiosreactjscross-browser

解决方案

看起来您正在使用组件中的模态组件内联。这会将它嵌套在布局中。虽然这并没有错，但 Safari 可能会在某处继承某些样式，导致模态呈现不可见（溢出、可见性等）。您可以尝试使用 React 门户，而不是尝试追踪导致继承问题的父元素。

门户允许您在根文档的不同部分呈现组件。无论如何，我通常喜欢这种方法用于模态窗口，因为您可以将模态 HTML 放置在布局容器之外。我倾向于更好地控制文档根目录中的模态窗口，而不必弄乱布局的边距、填充、弹性、浮动等。

以这个 index.html 代码为例（为了便于阅读，稍微删减了一些）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
            name="description"
            content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <title>React App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="overlays"></div>
        <div id="root"></div>
    </body>
</html>

你会注意到那里的<div id="overlays"></div>. 您可以使用门户在该 div 而不是id="root"div 中加载组件。

在您的 Modal 组件代码中，您可以渲染到门户元素：

import { createPortal } from 'react-dom';

const portalElement = document.getElementById('overlays');

const Modal = (props) => {
    return (
        <>
            {createPortal(
                    <div className="modal">
                        <div className="modal__content">{props.children}</div>
                    </div>,
                portalElement
            )}
        </>
    );
};

export default Modal;

在渲染 Modal 时，这将使布局脱离等式，并有望解决 Safari 中的问题。

让我们知道这对您有用！

推荐阅读