我有一个使用 ReactDOM.createPortal(); 创建的模式。它运作良好，除了我似乎无法以适用于 Chrome 和 Safari 的方式设置模式样式。
html:
<body>
<div id="main">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
</div>
<div id="portal">
<div>
<div class="modal-wrapper">
<div class="modal-card">
<div class="row">
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="background-overlay"></div>
</div>
</div>
</div>
</body>
CSS:
#portal {
.modal-wrapper {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
overflow: hidden;
max-height: 100%;
.modal-card {
background: white;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 10;
max-width: 800px;
margin-top: 10px;
width: 50%;
overflow: auto;
padding: 10px;
max-height: 90%;
}
.close-button {
position: relative;
}
.background-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: black;
opacity: 0.5;
}
}
}
请参阅https://jsfiddle.net/alisonmtague/am5jfr37/26/同时使用 safari 和 chrome。
在 Safari 上，.background-overlay 覆盖了 .modal-card，您无法滚动模式(而是滚动背景页面)。我希望我正在创建的模态的内容非常大，所以我需要模态是可滚动的。理想情况下，我还希望 #main div 在模式打开时不滚动。
改变 z-index 并不能解决问题
最佳答案
当您打开模式时，将一个类应用于您的 <body> (即 fixed )和:
body.fixed {
overflow: hidden;
position: fixed;
}
显然，您需要在关闭模式时将其删除。
此外，你的模态滚动容器应该有:
{
-webkit-overflow-scrolling: touch;
}
...，除了overflow-y: auto;和固定高度，小于 100vh .就是这样。
注意:根据设备、Safari 版本和 iOS 版本的不同，您可能不需要两者(第二个是真正重要的)，但两者都可以获得最大的兼容性。
引用:“在 Safari 上，.background-overlay 覆盖了 .modal-card，您无法滚动模式”:
假设添加 position: relative;至 .modal-card行不通:是什么阻止您放置 .background-overlay作为 .modal-wrapper 的第一个 child 和 .modal-card作为第二？
关于css - 自定义模态 css 样式适用于 chrome 而不是 safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54188486/