Центрирование реагирующего портала поверх родительского элемента - PullRequest
Новая
       14

Центрирование реагирующего портала поверх родительского элемента

0 голосов
/ 10 апреля 2020

Я много читал о Порталах и решил создать один.

У меня есть простая страница реакции, которая отображает таблицу.

Поэтому я сделал кнопку, которая при нажатии , размывает таблицу и открывает портал.

Это "работает", но по какой-то причине таблица не центрирована, как я вижу в статьях, которые я читал.

Это просто появляется внизу страницы, под размытой таблицей.

Вот мой портал: 

function MyPortal() {
    return ReactDOM.createPortal(
        <div>
            <div>My first Portal!</div>
            <div>HEY YOU</div>
        </div>,
        document.getElementById('portal-root'),
        document.getElementById('DisplayTable').style.filter = 'blur(5px)'
    )
}

А вот моя табличная функция: 

function DisplayTable() {
const [isPortalOpen, setIsPortalOpen] = useState(false);

// some data processing code for the table


return (
    <div id="mainContent">
        <div id="DisplayTable">
            <table>
                <tr>
                    <td>My Table</td>
                </tr>
                <tr>
                    <td><button onClick={() => { setIsPortalOpen(!isPortalOpen); }}>Portal Button</button></td>
                </tr>
            </table>
        </div>
         {isPortalOpen && (
            <MyPortal />
        )}
    </div>
)

И вот мой основной указатель. js: 

ReactDOM.render(
    <React.Fragment>
        <Table />
        <div id="portal-root"></div>
    </React.Fragment>,
    document.getElementById('root')
)

Как сделать так, чтобы портал отображался в середине экрана, а не внизу?

Нужно ли использовать другой компонент или библиотека?

Спасибо!

1 Ответ

0 голосов
/ 13 апреля 2020

Так вот как я это сделал. Я уверен, что есть много способов сделать это.

Я добавил это в основной родительский div портала: 

z-index: 100;

Затем я добавил это в div, который создает портал: 

position: absolute; 
background-color: #eee;
border: 1px solid #555;
left:0;
right:0;
margin-left: auto;
margin-right: auto;
height: 75%;
top: 15%; /* push down by 50% of the height of the container */
width: 80%;
margin-top: -25px; /* bring it back up by half of it's height */

Как я уже сказал, есть много способов достичь этого, и это был мой путь.

...