(работает)
(js)
var modal3 = document.getElementById("mymodal_sub");
var btn3 = document.getElementById("btn_modal_window_sub");
var close3 = document.getElementsByClassName("close_modal_sub")[0];
close3.onclick = function () {
modal3.style.display = "none";
}
window.onclick = function (event) {
if(event.target == modal3) {
modal3.style.display = "none";
}
(html)
<div class="modal3" id="mymodal_sub">
<div class="modal_content3">
<div class="close_modal_sub"><img src="img/cancel.png"></div>
<p class="text_modal_w3">text</p>
</div>
</div>
(css)
.modal3 {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
overflow: auto;
z-index: 98;
}
.modal_content3 {
position: absolute;
background-color: white;
border: 1px solid #a7a7a7;
border-radius: 10px;
padding: 20px;
width: 25%;
height: 15%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.close_modal_sub {
float: right;
font-size: 30px;
cursor: pointer;
z-index: 100;
}
.text_modal_w3 {
margin-top: 50%;
font-size: 30px;
font-family: "Century Gothic";
font-weight: bold;
text-align: center;
color: #591426;
transform: translate(0%, -175%);
}
(не работает)
(js)
var modal1 = document.getElementById("mymodal1");
var btn1 = document.getElementById("btn_modal_window1");
var close1 = document.getElementsByClassName("close_modal1")[0];
btn1.onclick = function () {
modal1.style.display = "block";
}
close1.onclick = function () {
modal1.style.display = "none";
}
window.onclick = function (event) {
if(event.target == modal1) {
modal1.style.display = "none";
}
(html)
<div class="modal1" id="mymodal1">
<div class="modal_content1">
<div class="close_modal1"><img src="img/cancel.png"></div>
<p class="text_modal_w1">ИНФОРМАЦИЯ О САЙТЕ</p>
<p class="text_modal_w21">
САЙТ СОЗДАН ДЛЯ ТОГО, ЧТОБЫ ЗРИТЕЛЬ МОГ ПОСМОТРЕТЬ
ИНФОРМАЦИЮ О ФИЛЬМЕ И НАЙТИ ДЛЯ СЕБЯ ПОДХОДЯЩИЙ.
САЙТ НЕ ЯВЛЯЕТСЯ
ПЛОЩАДКОЙ ДЛЯ ПРОСМОТРА ФИЛЬМОВ! ОН ЛИШЬ ПОМОГАЕТ
ОПРЕДИЛИТСЯ НАД ФИЛЬМОМ ДЛЯ БЛИЖАЙШЕГО ПРОСМОТРА,
А ТАКЖЕ САЙТ ПУБЛИКУЕТ НОВОСТИ О ФИЛЬМАХ, АКТЕРАХ И
КИНОИНДУСТРИИ В ЦЕЛОМ.</p>
</div>
</div>
(css)
.modal1 {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
overflow: auto;
z-index: 100;
}
.modal_content1 {
position: absolute;
background-color: white;
border: 1px solid #a7a7a7;
border-radius: 10px;
padding: 20px;
width: 45%;
height: 30%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1001;
}
.close_modal1 {
float: right;
font-size: 30px;
cursor: pointer;
z-index: 100;
}
.text_modal_w1 {
font-size: 32px;
font-family: "Century Gothic";
font-weight: bold;
text-align: center;
color: #591426;
}
.text_modal_w21 {
margin-top: 25px;
font-size: 16px;
font-family: "Century Gothic";
font-weight: bold;
text-align: center;
color: #591426;
line-height: 24px;
}