Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   изменение display блока по клику (https://javascript.ru/forum/misc/55319-izmenenie-display-bloka-po-kliku.html)

bubanay 23.04.2015 01:14
изменение display блока по клику
 
На ссылке висит функция. 
<a href="javascript:attribute()">Звонок</a>
По клику на нее появляется и исчезает блок div#cl с формой. Как мне добавить в эту функцию событие, что бы при нажатии мимо ссылки и блока div c формой, div исчезал бы.

И можно ли как-то убрать функцию из ссылки? Хотелось бы обращаться к id 

<a href="#" id="zvonok">Звонок</a>



function attribute(){
			var form = document.getElementById('cl');
			if(form.style.display == 'none'){
				form.style.display = 'block';
			}else{
				form.style.display = 'none';
			}

vuchastyi 23.04.2015 01:23 
$(function () {
         $('body').click(function() {
          $('div.popup'). hide();
           $('#overlay').remove('#overlay');});
	$('a.show_popup').click(function () {
		$('div.'+$(this).attr("rel")).fadeIn(500);
		$("body").append("<div id='overlay'></div>");
		$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
		return false;				
	});	
                    $('a.show_popup').click(function (event) {
                       event.stopPropagation();
		$(this).parent().fadeOut(100);
		$('#overlay').remove('#overlay');
		return false;
	});};

bubanay 23.04.2015 01:28
без jquery не обойтись?

vuchastyi 23.04.2015 01:33
http://ru.stackoverflow.com/question...не-окна

рони 23.04.2015 08:50
Закрытие модального окна по клику мимо него
 
bubanay,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     #cl.show {  visibility: visible; opacity: 1; }
     #cl{
    background-color: #D2B48C;
	border: 3px solid #8B4513;
	display: inline-block;
	left: 50%;
	opacity: 0;
	padding: 15px;
	width: 300px;
	height: 323px;
	position: fixed;
	text-align: justify;
	top: 40%;
	visibility: hidden;
	z-index: 999999;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: opacity .5s, top .5s;
	-moz-transition: opacity .5s, top .5s;
	-ms-transition: opacity .5s, top .5s;
	-o-transition: opacity .5s, top .5s;
	transition: opacity .5s, top .5s;
	border-radius: 11px;
     }

  </style>
  <script>
     function init()
     {
    var form = document.getElementById('cl'), tel = document.getElementById('zvonok');
    document.onclick = function(event) {
    var elem = event.target;
    event.target === tel && form.classList.toggle("show");
    if (elem === form || form.contains(elem) || event.target === tel) return false;
    form.classList.remove("show");
}
     }
     window.onload = init;
  </script>
</head>

<body>
<a href="#" id="zvonok">Звонок</a>
<div id="cl"> <form action="http://">
      <h4>test</h4>
</form>
</div>

</body>

</html>

bubanay 23.04.2015 23:15
а если на странице не 1 открывающийся блок, а несколько? Каждый из которых должен открываться по своей ссылке
<body>
		<a href="#" id="zvonok">Звонок</a>
		<div id="cl"> 
			<h4>test</h4>
		
		</div>
		
		<a href="#" id="zvonok2">Звонок2</a>
		<div id="cl2"> 
			<h4>test2</h4>
		
		</div>
		
		<a href="#" id="zvonok3">Звонок3</a>
		<div id="cl3"> 
			<h4>test3</h4>
		
		</div>
		
	</body>

Весь день пытался решить эту задачу. Как сделать универсально? Как такие задачи вообще правильно решаются?

рони 23.04.2015 23:23
Цитата:
Сообщение от bubanay
Каждый из которых должен открываться по своей ссылке
а закрываться ?

рони 24.04.2015 00:05
Открывашка 214 для модальных окон
 
:write: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .cl.show {  visibility: visible; opacity: 1; }
     .cl{
    background-color: #D2B48C;
	border: 3px solid #8B4513;
	display: inline-block;
	left: 50%;
	opacity: 0;
	padding: 15px;
	width: 300px;
	height: 323px;
	position: fixed;
	text-align: justify;
	top: 40%;
	visibility: hidden;
	z-index: 999999;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: opacity .5s, top .5s;
	-moz-transition: opacity .5s, top .5s;
	-ms-transition: opacity .5s, top .5s;
	-o-transition: opacity .5s, top .5s;
	transition: opacity .5s, top .5s;
	border-radius: 11px;
     }

  </style>
  <script>
     function init() {
         var form = document.querySelectorAll('.cl'),
             tel = document.querySelectorAll('.zvonok'),
             open;
         document.onclick = function(event) {
             var elem = event.target;
             if (open && (elem === open || open.contains(elem))) return false;
             if (elem.classList.contains('zvonok')) {
                 for (var i = 0; i < tel.length; i++) {
                     if (elem === tel[i]) break
                 }
                 if (open && open !== form[i]) open.classList.remove("show");
                 open = form[i];
                 open.classList.toggle("show");
                 return false;
             }
           open &&   open.classList.remove("show");
         }
     }
     window.onload = init;
  </script>
</head>

<body>
<a href="#" class="zvonok" >Звонок</a>
		<div class="cl">
			<h4>test</h4>

		</div>

		<a href="#" class="zvonok">Звонок2</a>
		<div class="cl">
			<h4>test2</h4>

		</div>

		<a href="#" class="zvonok">Звонок3</a>
		<div class="cl">
			<h4>test3</h4>

		</div>


</body>

</html>

rikitiki 26.04.2015 07:13
рони огромное спасибо вам за помощь!
Попробовал использовать в Wordpress упрощённный код из вашего поста #5.
Однако не получается
Я уже упоминал в соседней теме, что пытаюсь заставить открываться и закрываться в меню форму поиска, как в меню на этом сайте: http://algolux.com/news/. При этом в моём случае плавная анимация не нужна, и мне теперь уже безразлично, что будет использоваться - чистый js или jquery. Лишь бы работало.
Сейчас выдрал из своего тестового сайта http://cosmetic.besaba.com/ кусок меню с текстовой кнопкой "Поиск" и формой поиска.
Код вместе с вашим скриптом из поста #5, в который я подставил свои классы, привожу ниже.
Для наглядности, в коде ниже и на сайте, чтобы видеть как выглядит форма поиска, свойство visibility: hidden в диве box закомментировано. Но убираю комментирование, форма становится невидимой, тыкаю в Поиск и ничего не происходит.
!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
	 
a.search-link {
    cursor: pointer;
	text-transform: uppercase;
 /* font-family: IcoMoon;  */
}

.box {
    font-size: 0;
    left: 100px;
    padding: 10px;
	margin-left: 10px;
    position: absolute;
    right: 0;
    text-align: right;
    width: 300px;
    z-index: 99999;
/*	visibility: hidden; */
}

.box.show {  visibility: visible; opacity: 1; }

ul{
	list-style-type: none;
}

li{
	display: inline-block;
     margin: 0 2.85714rem 0 0;
     position: relative;
	}

  </style>
  <script>
     function init()
     {
    var form = document.getElementById('box'), tel = document.getElementById('search-link');
    document.onclick = function(event) {
    var elem = event.target;
    event.target === tel && form.classList.toggle("show");
    if (elem === form || form.contains(elem) || event.target === tel) return false;
    form.classList.remove("show");
}
     }
     window.onload = init;
  </script>
</head>

<body>

<ul>
<li>
<a id="main-nav-search-link" class="search-link">Параллакс</a>
</li>
<li>
<a id="main-nav-search-link" class="search-link">Поиск</a>
<div class="box">
<form class="menu-search-form" action="http://cosmetic.besaba.com/" method="get">
<p>
<input id="s" class="text" type="text" onblur="if (this.value == '') {this.value = 'Кто Ищет, Тот Найдет !';}" onfocus="if (this.value == 'Кто Ищет, Тот Найдет !') {this.value = '';}" name="s" value="Кто Ищет, Тот Найдет !">
<input id="searchsubmit" class="my-wp-search" type="submit" value="Искать">
</p>
</form>
</div>
</li>
</ul>

</body>

</html>


Нашёл ещё один ваш вариант: http://javascript.ru/forum/jquery/54...tml#post362759.
Но там лишний код для моего случая и navbar bootstrap используется.

рони 26.04.2015 10:43
rikitiki,
:-? 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

a.search-link {
    cursor: pointer;
	text-transform: uppercase;
 /* font-family: IcoMoon;  */
}

#box {
    font-size: 0;
    left: 100px;
    padding: 10px;
	margin-left: 10px;
    position: absolute;
    right: 0;
    text-align: right;
    width: 300px;
    z-index: 99999;
visibility: hidden;
}

#box.show {  visibility: visible; opacity: 1; }

ul{
	list-style-type: none;
}

li{
	display: inline-block;
     margin: 0 2.85714rem 0 0;
     position: relative;
	}

  </style>
  <script>
     function init()
     {
    var form = document.getElementById('box'), tel = document.getElementById('search-link'), submit = document.getElementById('searchsubmit');
    document.onclick = function(event) {
    var elem = event.target;
    elem === tel && form.classList.toggle("show");
    if(elem === submit) return true;
    if (elem === form || form.contains(elem) || event.target === tel) return false;
    form.classList.remove("show");
}
     }
     window.onload = init;
  </script>
</head>

<body>

<ul>
<li>
<a id="main-nav-search-link" class="">Параллакс</a>
</li>
<li>
<a id="search-link">Поиск</a>
<div id="box">
<form class="menu-search-form" action="http://cosmetic.besaba.com/" method="get">
<p>
<input id="s" class="text" type="text" onblur="if (this.value == '') {this.value = 'Кто Ищет, Тот Найдет !';}" onfocus="if (this.value == 'Кто Ищет, Тот Найдет !') {this.value = '';}" name="s" value="Кто Ищет, Тот Найдет !">
<input id="searchsubmit" class="my-wp-search" type="submit" value="Искать">
</p>
</form>
</div>
</li>
</ul>

</body>

</html>

rikitiki 26.04.2015 11:32
Огромное спасибо рони!!! Ваш профиль увековечить надо в лого красной шапки этого сайта, вместо зайчика. За помощь чайникам вроде меня.
А то я тут от безвыходности утром на другие сайты полез. Нашёл другую страницу:http://webkab.ru/skryt-element-pri-k...delami-jquery/
Вставил туда свои классы. Но и здесь случился облом - не работает. Невезуха какая то. Чуть приступ истерики не начался.
Ещё раз спасибо!!!


Часовой пояс GMT +3, время: 20:54.