Назначить JS переменную из CSS элемента стиля - PullRequest
Новая
       12

Назначить JS переменную из CSS элемента стиля

0 голосов
/ 11 февраля 2020

С несколькими модалами на странице есть ли способ создать скрипт, который бы закрывал открытый модал при нажатии ES C или за пределами модального режима? Приведенный ниже код является попыткой установить «модальный» в качестве переменной в JavaScript условии, при котором модальный атрибут имеет атрибут отображения «блок». 

<html>
<head>
<style>
.modal {
	display:none;
	position:fixed;
	top:0;
	right:0;
	width:100%;
	height:100%;
	z-index:1;
	}
.modal-content {
    position:relative;
    width:60%;
	min-height:40%;
	margin:8% auto;
	padding:5px;
	background:lightblue;
	}
.close{
	position:relative;
	top:0;
	left:90%;
	font-size:36px;
	}
</style>
</head>
<body>
<div>
<button onclick="mod1.style.display='block'">Click A</button>
<button onclick="mod2.style.display='block'">Click me B</button> 
</div>

<div id="mod1" class="modal">
	<div class="modal-content">
	<button class="close" onclick="mod1.style.display = 'none';">&times;</button>
	<div><h3>Number 1</h3></div></div></div>

<div id="mod2" class="modal">
<div class="modal-content">
	<button class="close" onclick="mod2.style.display = 'none';">&times;</button>
	<div><h3>Number 2</h3></div></div></div>

<script>
if (document.getElementById("mod1").style.display = "block") { var modal = document.getElementById("mod1") }
if (document.getElementById("mod2").style.display = "block") { var modal = document.getElementById("mod2") }

window.onclick = function(event) {
  if (event.target == modal) {modal.style.display = "none";}
}
document.addEventListener('keyup', function(e) {
    if (e.keyCode == 27) {modal.style.display = "none";}
});
</script>
</body>
</html>

Этот код работает только для последнего мода и имеет побочный эффект по умолчанию, открывая все моды, когда страница загружена. Предложения?

...