Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.04.2017, 06:15
Кандидат Javascript-наук
Отправить личное сообщение для yaparoff Посмотреть профиль Найти все сообщения от yaparoff
 
Регистрация: 26.04.2016
Сообщений: 106

Не всплывает окно при клике
Использую делегирование.
Окно не всплывает. Что не так?

http://codepen.io/anon/pen/gmJpWX
Ответить с цитированием
  #2 (permalink)  
Старый 06.04.2017, 08:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от yaparoff
Что не так?
Тестировать нужно свой код...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.features {
	width: 350px;
	margin: 0 auto;
	border-left: 1px solid gray;
	border-right: 1px solid gray;
}
.features li {
	border-top: 1px solid gray;
}
.features li:last-child {
	border-bottom: 1px solid gray;
}
.feature-name {
	font-size: 20px;
	padding: 10px 0;
	cursor: pointer;
	text-align: center;
}
.feature-name:hover {
	background-color: gray;
	color: #fff;
	-webkit-transition: 0.45s;
	transition: 0.45s;
}
.feature-wrapper {
	position: absolute;
    left: -9999px;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    cursor: default;
    visibility: hidden;
}
.feature-wrapper.visible {
	position: fixed;
    visibility: visible;
    left: 0;
}
.feature-description {
	position: relative;
    width: 500px;
    margin: 300px auto 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
	text-align: center;
}
.feature-description .close {
	position: absolute;
    top: 10px;
    right: 13px;
    color: #6d6d6d;
    cursor: pointer;
}
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ul class="features">
	<li>
		<div class="feature-name">hash</div>
		<div class="feature-wrapper">
			<div class="feature-description">
<!--						<div class="close">X</div>-->
				<h3>hash</h3>
				<p>часть URL содержащая якори</p>
				<p><i>location.hash</i></p>
			</div>
		</div>
	</li>
	<li>
		<div class="feature-name">search</div>
		<div class="feature-wrapper">
			<div class="feature-description">
<!--						<div class="close">X</div>-->
				<h3>hash</h3>
				<p>часть URL содержащая якори</p>
				<p><i>location.hash</i></p>
			</div>
		</div>
	</li>
</ul>
<script type='text/javascript'>
var features = document.querySelector('.features');
features.addEventListener('click', function(event) {
	var target = event.target;
//				var	close = target.classList.contains('close');
//				if (target.classList.contains('feature-description') && !close) break;
	while(target != features) {
		alert(target.classList.contains('feature-name'))
		if (target.classList.contains('feature-name')) {
			var o=target.querySelector('.feature-wrapper');
			alert(o)
			o.classList.toggle('visible');
			break;
		}
	}
	
});
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 06.04.2017, 08:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

yaparoff, как вариант...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.features {
	width: 350px;
	margin: 0 auto;
	border-left: 1px solid gray;
	border-right: 1px solid gray;
}
.features li {
	border-top: 1px solid gray;
}
.features li:last-child {
	border-bottom: 1px solid gray;
}
.feature-name {
	font-size: 20px;
	padding: 10px 0;
	cursor: pointer;
	text-align: center;
}
.feature-name:hover {
	background-color: gray;
	color: #fff;
	-webkit-transition: 0.45s;
	transition: 0.45s;
}
.feature-wrapper {
	position: absolute;
    left: -9999px;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    cursor: default;
    visibility: hidden;
}
.feature-wrapper.visible {
	position: fixed;
    visibility: visible;
    left: 0;
}
.feature-description {
	position: relative;
    width: 500px;
    margin: 300px auto 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
	text-align: center;
}
.feature-description .close {
	position: absolute;
    top: 10px;
    right: 13px;
    color: #6d6d6d;
    cursor: pointer;
}
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ul class="features">
	<li>
		<div class="feature-name">hash</div>
		<div class="feature-wrapper">
			<div class="feature-description">
				<h3>hash</h3>
				<p>часть URL содержащая якори</p>
				<p><i>location.hash</i></p>
			</div>
		</div>
	</li>
	<li>
		<div class="feature-name">search</div>
		<div class="feature-wrapper">
			<div class="feature-description">
				<h3>hash</h3>
				<p>часть URL содержащая якори</p>
				<p><i>location.hash</i></p>
			</div>
		</div>
	</li>
</ul>
<script type='text/javascript'>
var features = document.querySelector('.features');
features.addEventListener('click', function(event) {
	var target = event.target;
	if (target != features) {
		if (target.classList.contains('feature-name')) {
			var o=target.nextSibling.nextSibling;
			if (o.classList.contains('feature-wrapper')) {
				o.classList.toggle('visible');
			};
		};
	};
});
</script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 06.04.2017, 11:37
Кандидат Javascript-наук
Отправить личное сообщение для yaparoff Посмотреть профиль Найти все сообщения от yaparoff
 
Регистрация: 26.04.2016
Сообщений: 106

ksa , спасибо!
А почему два раза nextSibling ? Т.е. сосед соседа? или что это означает?

Надо сделать также, чтобы при нажатии на крестик и при нажатии вне всплывающего окна это окно закрывалось, т.е. убирался класс 'visible'

Сделал что-то, но не работает

http://codepen.io/anon/pen/jBoroM
Ответить с цитированием
  #5 (permalink)  
Старый 06.04.2017, 13:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от yaparoff
Т.е. сосед соседа?
В твоем варианте - да.
Первый сосед - текстовая нода... Второй - нужный тебе элемент.

Сообщение от yaparoff
Надо сделать также, чтобы при нажатии на крестик и при нажатии вне всплывающего окна это окно закрывалось, т.е. убирался класс 'visible'
На крестик - просто.
Вешаешь на него обработчик... Правильно находишь родительский элемент и убираешь ему класс.

С кликом "вне окна" чуть сложнее.
При открытии окна нужно добавить обработчик клина на весь документ...
В том обработчике нужно смотреть не тот ли это элемент, который нужно закрыть... Если не тот - смотреть всех родителей, все старше и старше, проверяя "не тот ли это элемент, который нужно закрыть"... Если оного не нашлось - значит кликнули "мимо окна".
И это окно нужно закрыть, предварительно удалив обработчик клика на документе...

Есть еще вариант, со "шторой"...
Если, перед открытием окна, весь экран перекрыть ДИВом-шторой (окно будет поверх шторы) - на него можно повесить обработчик, в котором и будет закрываться окно.
Но "штора" не должна быть 100% прозрачной! Иначе не во всех браузерах будет отрабатываться клик на нем.

Последний раз редактировалось ksa, 06.04.2017 в 13:28.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Fancybox при клике на метку Яндекс.Карт не работает с параметрами imax57 jQuery 0 04.10.2014 09:18
скрыть открыть тот или иной блок при клике на ссылке ufaclub jQuery 9 26.08.2014 00:14
Изменение размера элемента при клике Derekovich Элементы интерфейса 25 05.12.2013 20:45
Изменение фона элемента при клике. psydo Элементы интерфейса 8 28.06.2012 23:53
При клике в любом месте документа должен удаляться определенный id DorianLeroy jQuery 2 24.12.2011 22:05