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


Но когда добавили строки до и после кода вызова окна, то при открытии оно провалилось в самый низ страницы и вышло за пределы экрана.

Вернуть окно в область экрана можно, заменив relative на absolute в коде

<div id="myModal" class="reveal-modal" style="top: 100px; opacity: 1; position: relative; margin: 0 auto; text-align:center;">

Но в этом случае всплывающее окно смещается влево.

Как бы решить эту проблему?

только ты забыл написать, что у .reveal-modal ещё куча стилей, которые действуют при замене. Попробуй так. Отключив все остальные стили.

position:absolute;
top: 50%;
left: 50%;
margin-left: -240px; /* Половина от окна */
margin-top: -250px; /* Половина от окна */
max-width: 580px;
text-align: center;
visibility: visible;
z-index: 101;

padding: 20px;
background-color: #804000;
border-radius: 15px;

Вроде как, ничего хорошего из этого не вышло: http://u9998464.beget.tech/311.html

Или я что-то не так понял?

<div id="myModal" class="reveal-modal" style="top: 100px; opacity: 1; position: relative; margin: 0 auto; text-align:center;">
Убери это, и все будет нормально.

В этом случае окно перестает быть всплывающим - оно открыто постоянно: http://u9998464.beget.tech/312.html

Да блин, ты свой код будешь делать, или мне за тебя его писать ?

Скрой, и покажи когда загрузится модалка.

Вы не могли бы выражаться яснее?

Я ничего не понимаю из Ваших реплик.

Владимир55 Как закончишь с экспериментами, пиши, а то я за тобой не успеваю "тестировать" код

Вроде, закончил: http://u9998464.beget.tech/316.html

Владимир55
Да, вроде норм, только видео не останавливается при закрытии, так же идет звук... повесь обработчик что я выше давал и будет гут !