возникла проблема, не могу понять в чем дело. В данном отрывке кода кнопка "Изменить телефон" работает как надо и модальное окно закрывается при нажатии вне его, а вот с кнопкой "Изменить пароль" какая-то проблема. Она закрывается крестиком, но не закрывается нажатием вне модального окна, хотя я делал все тоже самое (видимо нет).
var passmodal = document.getElementById('modal-pass-change');
var passbtn = document.getElementById("pass-change");
var passcross = document.getElementById("cross-pass-change");
var phonebtn = document.getElementById("phone-change");
var phonemodal = document.getElementById("modal-phone-change");
var phonecross = document.getElementById("cross-phone-change");
// pass change
passbtn.onclick = function() {
passmodal.style.display = "block";
}
passcross.onclick = function() {
passmodal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == passmodal) {
passmodal.style.display = "none";
}
}
//phone change
phonebtn.onclick = function() {
phonemodal.style.display = "block";
}
phonecross.onclick = function() {
phonemodal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == phonemodal) {
phonemodal.style.display = "none";
}
}
.pass-change {
z-index: 990;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
display: none;
}
.phone-change {
z-index: 990;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
display: none;
}
.pass-change-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
background-color: #fff;
width: 540px;
max-width: 100%;
height: 290px;
padding: 30px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
border-radius: 5px;
}
.phone-change-content {
background-color: #fff;
width: 540px;
max-width: 100%;
height: 190px;
padding: 30px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
border-radius: 5px;
overflow: hidden;
}
.cross {
position: absolute;
cursor: pointer;
right: 0;
top: 0;
width: 20px;
height: 20px;
margin: 14px 14px 0px 0px;
}
.cross:before,
.cross:after {
content: "";
position: absolute;
top: 8px;
right: -1px;
width: 21px;
height: 4px;
background: #c4c4c4;
}
.cross:before {
transform: rotate(45deg);
}
.cross:after {
transform: rotate(-45deg);
}
.cross:hover:before {
background-color: #a9a9a9;
}
.cross:hover:after {
background-color: #a9a9a9;
}
.modal-form {
border: 0 none;
padding: 0;
}
.modal-in {
border: 0 none;
border-radius: 5px;
background: #EFEBEB;
outline: none;
height: 30px;
width: 311px;
color: #000;
font-size: 20px;
padding: 0 15px;
letter-spacing: 3px;
line-height: 30px;
}
.modal-wrapper {
display: flex;
flex-direction: column;
}
.tr-modal-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 20px 0;
}
.modal-label {
margin: 0;
font-size: 20px;
line-height: 20px;
font-weight: 900;
font-size: 20px;
margin-bottom: 50px;
}
.td-modal-wrapper-info {
font-size: 15px;
line-height: 15px;
font-weight: 300;
}
.button-wrapper {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
}
<button id="phone-change" class="button" style="margin: 0px 0px 20px 0px">Изменить телефон</button>
<button id="pass-change" class="graybutton">Изменить пароль</button>
<div id="modal-phone-change" class="phone-change" style="display: none;">
<!--Phone Number Change-->
<div class="phone-change-content">
<div class="cross" id="cross-phone-change"></div>
<form action="">
<fieldset class="modal-form">
<div class="modal-wrapper">
<div class="modal-label">Изменение телефона</div>
<div class="tr-modal-wrapper">
<div class="td-modal-wrapper-info">Введите новый телефон</div>
<div class="td-modal-wrapper">
<input type="tel" class="modal-in">
</div>
</div>
<div class="button-wrapper">
<button id="phone-change-cancel" class="graybutton">Отменить</button>
<button id="phone-change-confurm" class="button">Изменить</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div id="modal-pass-change" class="pass-change" style="display: none;">
<!--Password Change-->
<div class="pass-change-content">
<div class="cross" id="cross-pass-change"></div>
<form action="">
<fieldset class="modal-form">
<div class="modal-wrapper">
<div class="modal-label">Изменение пароля</div>
<div class="tr-modal-wrapper">
<div class="td-modal-wrapper-info">Введите старый пароль</div>
<div class="td-modal-wrapper">
<input type="password" class="modal-in">
</div>
</div>
<div class="tr-modal-wrapper">
<div class="td-modal-wrapper-info">Введите новый пароль</div>
<div class="td-modal-wrapper">
<input type="password" class="modal-in">
</div>
</div>
<div class="tr-modal-wrapper">
<div class="td-modal-wrapper-info">Повторите новый пароль</div>
<div class="td-modal-wrapper">
<input type="password" class="modal-in">
</div>
</div>
<div class="button-wrapper">
<button id="pass-change-cancel" class="graybutton">Отменить</button>
<button id="pass-change-confurm" class="button">Изменить</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Не знаю важно ли это, но я еще заметил, что размеры позиционирования у модального окна изменения телефона в пикселях, а у модального окна изменения пароля в процентах. Почему так - не знаю