У меня есть следующий модальный компонент:

export default function LoginModal(props) { const { showLogin, hideLogin } = props if (!showLogin) return null return ( {amp}lt;div class='overlay'{amp}gt; {amp}lt;div class='modal'{amp}gt; {amp}lt;article class='mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10'{amp}gt; {amp}lt;div class='tc'{amp}gt; {amp}lt;h1 class='f4'{amp}gt;Firstname Lastname{amp}lt;/h1{amp}gt; {amp}lt;hr class='mw3 bb bw1 b--black-10' /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;p class='lh-copy measure center f6 black-70'{amp}gt; test test test test {amp}lt;/p{amp}gt; {amp}lt;/article{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ) } 

который я пытаюсь условно визуализировать, используя свойство состояния, хранящееся в моем хранилище с избыточностью. Однако, когда я размещаю это следующим образом:

 {amp}lt;article class='pv6 center ph3 ph5-ns tc br2 bg-washed-green dark-green mb5'{amp}gt; PAGE CONTENT HERE {amp}lt;/article{amp}gt; {amp}lt;LoginModal /{amp}gt; 

Он появляется ниже остального содержимого экрана, а не над всем остальным, как я надеялся. Я использую следующий CSS, чтобы попытаться получить этот эффект, но он не работает:

 .overlay { top: 0; bottom: 0; left: 0; right: 0; background-color: 'rgba(0,0,0,0.3)'; padding: 50; z-index: 300; } .modal { background-color: '#fff'; border-radius: 5; max-width: 500; min-height: 300; margin: '0 auto'; padding: 30; } 

Мне нужно, чтобы модал отображался как карточка входа в центре экрана с затемненным фоном, как это часто бывает на многих веб-сайтах. Я также предпочел бы не использовать библиотеку компонентов пользовательского интерфейса для достижения. Спасибо за помощь!

Я думаю, что вам не хватает position: fixed в ваших стилях .overlay .

Кроме того, вы можете рассмотреть возможность использования порталов для визуализации модальной части вне иерархии DOM вашего приложения, то есть вне {amp}lt;div id="app"{amp}gt;{amp}lt;/div{amp}gt; или {amp}lt;div id="root"{amp}gt;{amp}lt;/div{amp}gt; Мы обычно используем.

Чтобы сделать это, ваш index.html или эквивалентный файл будет иметь что-то вроде этого:

 {amp}lt;div id="app"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div id="modal"{amp}gt;{amp}lt;/div{amp}gt; 

И тогда вам нужно обновить свой LoginModal следующим образом:

 export default function LoginModal(props) { const { showLogin, hideLogin } = props; if (!showLogin) return null; return ReactDOM.createPortal(( {amp}lt;div class='overlay'{amp}gt; {amp}lt;div class='modal'{amp}gt; {amp}lt;article class='mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10'{amp}gt; {amp}lt;div class='tc'{amp}gt; {amp}lt;h1 class='f4'{amp}gt;Firstname Lastname{amp}lt;/h1{amp}gt; {amp}lt;hr class='mw3 bb bw1 b--black-10' /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;p class='lh-copy measure center f6 black-70'{amp}gt; test test test test {amp}lt;/p{amp}gt; {amp}lt;/article{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ), document.getElementById('modal')); } 

Обратите внимание, что если вы попытаетесь повторно использовать код в этом примере для создания универсального Modal компонента, вы сможете показывать только по одному за раз, поскольку они будут отображаться внутри одного и того же элемента #modal .

В документации по порталам вы можете увидеть пример, который динамически создает новый элемент, так что вы можете иметь несколько модалов одновременно.