Форум

kuchuluk · #1 (**permalink**) 04.04.2014, 21:47

здравствуйте. есть модальное окно - это div с id=main-window, и подложка с id=window. само окно расположено внутри подложки.

<div id="window">
		<div id="window-main">
			
		</div>
</div>

стили такие

Код:

#window{
	display: none;
	background:rgba(0,0,0,0.6);
	height:100%;
	width:100%;
	position:absolute;
	z-index: 998;
	top: 0;
	left: 0;
	cursor: pointer;
	}
#window-main{
	display: none;
	background:#f1ecec;
	position:absolute;
	z-index: 999;
	width:240px;
	height:151px;
	padding:20px;
	top: 19%;
	left: 50%;
	;
	margin-top: -75;
	}

то есть как видно при загрузке они спрятаны и появляются при нажатии на кнопку с помощью jquery кода

$(".voting-btn").click(function() {
			$("#window-main").css("display", "block");
			$("#window").css("display", "block");
		});

и по задумке они должны снова скрываться при нажатии на подложку тоже с помощью jquery

$("#window").click(function() {
			$("#window-main").css("display", "none");
			$("#window").css("display", "none");
		});

Так и получается, что они исчезают. Но они исчезают еще и при нажатии на само модальное окошко main-window. По логике вещей такого происходить не должно ведь. Что я не правильно делаю?

рони · #2 (**permalink**) 04.04.2014, 22:03

Сообщение от kuchuluk

Но они исчезают еще и при нажатии на само модальное окошко main-window.

клик передали выше - а там стоит обработчик. вы второй с этой проблемой за час ...

kuchuluk · #3 (**permalink**) 04.04.2014, 22:11

Сообщение от рони

клик передали выше - а там стоит обработчик.

не понял, выше чего я передал клик и какой где обработчик?

рони · #4 (**permalink**) 04.04.2014, 22:11

kuchuluk,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #window{
	display: none;
	background:rgba(0,0,0,0.6);
	height:100%;
	width:100%;
	position:absolute;
	z-index: 998;
	top: 0;
	left: 0;
	cursor: pointer;
	}
#window-main{
	display: none;
	background:#f1ecec;
	position:absolute;
	z-index: 999;
	width:240px;
	height:151px;
	padding:20px;
	top: 19%;
	left: 50%;
	;
	margin-top: -75;
	}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function () {
       $(".voting-btn").click(function () {
           $("#window-main").css("display", "block");
           $("#window").css("display", "block")
       });
       $("#window").click(function (a) {
           $(a.target).has("#window-main").length && ($("#window-main").css("display", "none"), $("#window").css("display", "none"))
       })
   });
  </script>
</head>

<body> <input name="" type="button" value="go" class="voting-btn">
 <div id="window">
		<div id="window-main">

		</div>
</div>


</body>

</html>

рони · #5 (**permalink**) 04.04.2014, 22:13

kuchuluk,
медитировать тут http://learn.javascript.ru/bubbling-and-capturing

Форум

Справочник

Discord чат

Курсы javascript