Форум

Bomberman · #1 (**permalink**) 15.03.2018, 18:12

Не открывается модальное окно, ошибку не выдаёт, просто нет реакции при нажатии на кнопку

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<title>Практика Javascript</title>
	<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body onload="fun3(),fun4(),fun5(),fun6()">
<div id ="lesson_6" class="lessons">
		   		<div class="iframe"><iframe width="760" height="515" src="https://www.youtube.com/embed/R2Es_mbSva0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
		   		<button id="modalw">Open Modal</button>
		   		<div id="myModal" class="modal">
		   			<div class="modalContent">
		   				<span class="close">&times;</span>
		   				<p>Modal window</p>
		   			</div>
		   		</div>
				
		   	</div>
		   </div>
		      </div>
		</div>
			   
		

	
	
	<script type="text/javascript" src="js.js"></script>
</body>
</html>

var modal = document.getElementById("myModal");
      btn = document.getElementById('modalw');
      span = document.getElementsByClassName("close")[0];

btn.onclick =  function () {
	modal.style.display = "block";
}





span.onclick = function () {
	modal.style.display = "none";
}

window.onclick = function (event) {
	if (event.target == modal) {
		modal.style.display = "none";
	}
}

Как исправить?

Noga_programmista · #2 (**permalink**) 15.03.2018, 20:57

Bomberman,
Он у тебя должен появляться, просто ты этого не замечаешь, сделай ему стайл заметный, что-то типо

<div id="myModal" style="width:100px; height:100px ; background-color:red " >

чтобы мог отслеживать появление

Bomberman · #3 (**permalink**) 15.03.2018, 21:39

В CSS указаны свойства всех 3 элементов, проверял наличие путем удаление display:none, окно есть.

Код:

.modal{
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.8);
}

.modalContent{
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border:1px solid #888;
	width: 80%;
	color: black;
	text-align: center;

}
.close{
	color:#aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

Я не знаю в чём ошибка, ещё на анимацию задание делаю - работает только через onclick в HTML, этот код никак не работает, выдаёт Uncaught TypeError: Cannot read property 'style' of undefined, at HTMLButtonElement.onclick если через HTML onclick делать

рони · #4 (**permalink**) 15.03.2018, 21:52

Bomberman,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>Практика Javascript</title>
  <style type="text/css">
  .modal{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.modalContent{
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border:1px solid #888;
  width: 80%;
  color: black;
  text-align: center;

}
.close{
  color:#aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
  </style>
</head>
<body>
<div id ="lesson_6" class="lessons">
       		<button id="modalw">Open Modal</button>
       		<div id="myModal" class="modal">
       			<div class="modalContent">
       				<span class="close">&times;</span>
       				<p>Modal window</p>
       			</div>
       		</div>

       	</div>





  <script>
  var modal = document.getElementById("myModal");
      btn = document.getElementById('modalw');
      span = document.getElementsByClassName("close")[0];

btn.onclick =  function () {
  modal.style.display = "block";
}





span.onclick = function () {
  modal.style.display = "none";
}

window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
</body>
</html>

Bomberman · #5 (**permalink**) 15.03.2018, 22:16

Нашёл нерабочий код выше, без него работает, спасибо

Форум

Справочник

Discord чат

Курсы javascript