CSS для отображения iFrame поверх всех элементов при вставке внутри блока приложения Shopify ⇐ CSS

[Anonymous]

Вот мое модальное окно, которое я хочу занять весь экран при открытии:

Код: Выделить всё

×

https://my.ngrok.app/web

А затем CSS, который у меня есть сейчас

Код: Выделить всё

.modal-gift {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* High index to sit above everything on the page */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgba(0,0,0,.7);
}

.modal-content {
background-color: #fefefe;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 0;
z-index: 1002; /* Above the overlay */
}

.modal-iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}

.modal-content, .modal-iframe {
box-sizing: border-box;
}

И вот что происходит сейчас: модальное окно по какой-то причине ограничено внутри другого div.
[img]https:// i.sstatic.net/Qz0cbQnZ.png[/img]

Где я ошибся?

Подробнее здесь: https://stackoverflow.com/questions/792 ... e-a-shopif