Мне нужно разместить некоторый динамический c текст поверх изображения в модальном окне, и у меня есть некоторые проблемы при увеличении и уменьшении масштаба или изменении высоты браузера. По сути, модальные размеры изменяются, и текст выходит не на свое место в модальном окне. Мне нужно, чтобы текст оставался в том же месте внутри модального окна.
У меня есть папка с этими 3 файлами:
- модальный. html
- modal_style . css
- modal_img.png
modal_img.png
Для простоты PNG, просто создайте пустой файл PNG этого размера: width 756 пикселей, высота: 322 пикселей.
модальный. html
<html>
<link rel="stylesheet" href="./modal_style.css">
<div style="display: block;" class="modal img-with-text">
<img src="./modal_img.png" class="modal-content behind">
<p style="font-color: #FF0000;" class="on-top">
This is a text this long, this is a text this long, this long, this long, this long, this longg
</p>
</div>
</html>
модальный_стиль. css
/* MODAL*/
.modal {
// display: none; /* Hidden by default */
// position: fixed; /* Stay in place */
z-index: 2; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
position: relative;
margin: auto;
display: block;
width: 80%;
max-width: 700px;
background-color: white;
}
/* Add Animation */
.modal-content, #modalCaptionId {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
background-color: white;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.behind {
position: relative;
}
.on-top {
z-index: 2;
position: relative;
color: red;
top: -25%;
left: -4%;
width: 400px;
height: 50px;
margin: auto;
overflow: auto;
}
.img-with-text {
display: block;
align: center;
}