- 18, May 2024
- #1
Привет,
На основе модального примера Tailwindcss 2. https://alpinetoolbox.com/examples/modal
Я создаю модальный диалог с настройкой класса max-h-screen, например
HTML:
и все работает нормально, пока на странице не будет горизонтальной прокрутки.
Если страница имеет горизонтальную прокрутку, то только часть страницы имеет модальное окно, а пространство внизу
пусто, и это делает страницу
Я также пытался использовать max-h-full вместо max-h-screen, но безрезультатно.
Как я могу это сделать?
Спасибо!
Я создаю модальный диалог с настройкой класса max-h-screen, например
<div class="overflow-auto" role="dialog" style="background-color: rgba(0,0,0,0.5)" x-show="showModal"
:class="{ 'absolute inset-0 z-50 flex items-center justify-center': showModal }"
@keydown.escape.window="showModal = false"
>
<!--Dialog-->
<div
class="flex flex-col sm:h-4/5 md:h-4/6 max-h-screen justify-between rounded shadow-lg py-4 text-left px-6 modal-container"
x-show="showModal" @click.away="showModal = false" x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90">
HTML:
и все работает нормально, пока на странице не будет горизонтальной прокрутки.
Если страница имеет горизонтальную прокрутку, то только часть страницы имеет модальное окно, а пространство внизу
пусто, и это делает страницу
Я также пытался использовать max-h-full вместо max-h-screen, но безрезультатно.
Как я могу это сделать?
Спасибо!
![[WP] Pace - Premium WordPress Theme](/assets/images/icons/forum3.png){kind=icon}
![[Outsource-people 2015] Selling IT Services to Silicon Valley [Eng]](/assets/images/icons/forum0.png){kind=icon}
