Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вызов таблицы по клику, и пропажа её по клику на любое другое место (https://javascript.ru/forum/dom-window/71165-vyzov-tablicy-po-kliku-i-propazha-ejo-po-kliku-na-lyuboe-drugoe-mesto.html)

MelvinBlood 30.10.2017 15:10
Вызов таблицы по клику, и пропажа её по клику на любое другое место
 
:help: :help: :help: Такая задача, есть страница, на ней есть фотография и скрытая таблица. Нужно что бы по клику на фотографию таблица показалась, а по нажатию на любое другое место она пропадает.

<head>
<title> Команда "Дети". Проекты </title>
<link rel="stylesheet" type="text/css" href="Оформление 2.css" />
<script src="animation.js"></script>
</head>
<body>
<header>
</header>
<div class="cl1">
<img id="contactUs"  href="#" src="https://pp.userapi.com/c840239/v840239202/12991/cyS08OKYqq0.jpg" alt=""width="250" height="200"></img></div>
<div class="proekt">
<ul>
<li>Главный проект:
<ol type="I">
<li>Умный дом</li>
</ol>
<li>Побочные проекты:
<ol type="1">
<li>Голосовое управление</li>
<li>Термоконтроль</li>
<li>Выключатель</li>
</ol>
</li></div>
<table border="1" id="tablica"><tr>
     <td><big><a href="https://vk.com/id183235628">Дорош Александр</a></big></td>
     <td><big><a href="https://vk.com/melvinblood">Пилькин Костя</a></big></td>
     <td><big><a href="https://m.vk.com/grizzlybearsb">Тарасюк Михаил</a></big></td>
     <td><big><a href="https://vk.com/id152163568">Пащук Артур</a></big></td>
</tr></div>
<tr>
     <td><img src="https://pp.userapi.com/c840239/v840239202/12991/cyS08OKYqq0.jpg" alt=""width="300" height="200"></img></td>
     <td><img src="https://pp.userapi.com/c636331/v636331966/38c6/w3yj4R2ivCs.jpg"  alt=""width="300" height="200"></img></td>
     <td><img src="https://pp.userapi.com/c841425/v841425468/16ae7/urh4JMgZLI4.jpg"  alt=""width="300" height="200"></img></td>
     <td><img src="https://pp.userapi.com/c836232/v836232805/5f978/suFp26brjhc.jpg"  alt=""width="180" height="200"></img></td>
</tr>
<tr>
<td>
<ul>
 <li><big><b>Навыки:</b></big>
 <ul>
     <li>Пайки, присуствует</li>
     <li>Конструирования, присуствует</li>
     <li>Работы в программах САПР, присуствует</li>
     <li>Создание программ для ЧПУ станка, присуствует</li>
     <li>Создания БПЛА, присуствуют</li>
	 <li>web - Дизайна, отсуствуют</li>
	 </li></ul>
     <li><big><b>Достижения:</b></big><ul>
     <li>Участник международных соревнований</li>
     <li>Создание собственного проекта 3D-принтера</li></ul></ul>
</td>
<td>
<ul>
      <li><big><b>Навыки:</b></big>
 <ul>
     <li>Пайки, присуствуют</li>
     <li>Конструирования, отсуствуют</li>
     <li>Работы в программах САПР, присуствуют</li>
     <li>Создание программ для ЧПУ станка, отсуствуют</li>
     <li>Создания БПЛА, отсуствуют</li>
	 <li>web - Дизайна, присуствуют</li>
	 <li>Езды на роликах присуствуют</li>
	 </li></ul>
     <li><big><b>Достижения:</b></big><ul>
	 <li>Участник коллектива, который занимается фаер шоу</li>
     <li>Участник республиканских и международного конкурса и конференции</li>
     <li>Олимпиадник в обсласти физики 4 год</li>
	 <li>Нахождение на доске почёта колледжа</li>
	 </ul></ul>
</td>
<td>
<ul>
	 <li><big><b>Навыки:</b></big><ul>
	 <li>Пайки, присуствуют</li>
	 <li>Конструирования, присуствует</li>
	 <li>Работы в программах САПР, отсуствуют</li>
	  <li>Создание программ для ЧПУ станка, отсуствуют</li>
     <li>Создания БПЛА, отсуствуют</li>
	 <li>web - Дизайна, отсуствуют</li>
	 <li>Езды на роликах присуствуют</li>
	 <li>Езды на скейте присуствуют</li>
	 </li></ul>
	 <li><big><b>Достижения:</b></big><ul>
	 <li>Занятие баскетболом</li>
	 <li>Занятия волейболом</li>
	  <li>Занятия футболом</li>
	   <li>Постоянный член кооманды группы в спортивных мероприятиях</li>
</td>
	 <td>
	 <ul>
	 <li><big><b>Навыки:</b></big><ul>
	 <li>Пайки, присуствуют</li>
	 <li>Конструирования, присуствует</li>
	 <li>Работы в программах САПР, присуствуют</li>
	  <li>Создание программ для ЧПУ станка, отсуствуют</li>
     <li>Создания БПЛА, отсуствуют</li>
	 <li>web - Дизайна, отсуствуют</li>
	 <li>Езды на роликах присуствуют</li>
	 </li></ul>
	 <li><big><b>Достижения:</b></big><ul>
	 <li>Занятие фигурным катанием</li>
	 <li>Занятия ганболом</li>
	 </td>
</a>
</table>
<div id="backcallmsgdiv">
    <a href="#">
        <div id="close">X</div>
    </a>
</div>
</body>

Nexus 30.10.2017 15:39
Может так?
<head>
<title> Команда "Дети". Проекты </title>
<link rel="stylesheet" type="text/css" href="Оформление 2.css" />
<script src="animation.js"></script>
</head>
<body>
<header>
</header>
<div class="cl1">
<img id="contactUs"  href="#" src="https://pp.userapi.com/c840239/v840239202/12991/cyS08OKYqq0.jpg" alt=""width="250" height="200"></img></div>
<div class="proekt">
<ul>
<li>Главный проект:
<ol type="I">
<li>Умный дом</li>
</ol>
<li>Побочные проекты:
<ol type="1">
<li>Голосовое управление</li>
<li>Термоконтроль</li>
<li>Выключатель</li>
</ol>
</li></div>
<table border="1" id="tablica"><tr>
     <td><big><a href="https://vk.com/id183235628">Дорош Александр</a></big></td>
     <td><big><a href="https://vk.com/melvinblood">Пилькин Костя</a></big></td>
     <td><big><a href="https://m.vk.com/grizzlybearsb">Тарасюк Михаил</a></big></td>
     <td><big><a href="https://vk.com/id152163568">Пащук Артур</a></big></td>
</tr></div>
<tr>
     <td><img src="https://pp.userapi.com/c840239/v840239202/12991/cyS08OKYqq0.jpg" alt=""width="300" height="200"></img></td>
     <td><img src="https://pp.userapi.com/c636331/v636331966/38c6/w3yj4R2ivCs.jpg"  alt=""width="300" height="200"></img></td>
     <td><img src="https://pp.userapi.com/c841425/v841425468/16ae7/urh4JMgZLI4.jpg"  alt=""width="300" height="200"></img></td>
     <td><img src="https://pp.userapi.com/c836232/v836232805/5f978/suFp26brjhc.jpg"  alt=""width="180" height="200"></img></td>
</tr>
<tr>
<td>
<ul>
 <li><big><b>Навыки:</b></big>
 <ul>
     <li>Пайки, присуствует</li>
     <li>Конструирования, присуствует</li>
     <li>Работы в программах САПР, присуствует</li>
     <li>Создание программ для ЧПУ станка, присуствует</li>
     <li>Создания БПЛА, присуствуют</li>
	 <li>web - Дизайна, отсуствуют</li>
	 </li></ul>
     <li><big><b>Достижения:</b></big><ul>
     <li>Участник международных соревнований</li>
     <li>Создание собственного проекта 3D-принтера</li></ul></ul>
</td>
<td>
<ul>
      <li><big><b>Навыки:</b></big>
 <ul>
     <li>Пайки, присуствуют</li>
     <li>Конструирования, отсуствуют</li>
     <li>Работы в программах САПР, присуствуют</li>
     <li>Создание программ для ЧПУ станка, отсуствуют</li>
     <li>Создания БПЛА, отсуствуют</li>
	 <li>web - Дизайна, присуствуют</li>
	 <li>Езды на роликах присуствуют</li>
	 </li></ul>
     <li><big><b>Достижения:</b></big><ul>
	 <li>Участник коллектива, который занимается фаер шоу</li>
     <li>Участник республиканских и международного конкурса и конференции</li>
     <li>Олимпиадник в обсласти физики 4 год</li>
	 <li>Нахождение на доске почёта колледжа</li>
	 </ul></ul>
</td>
<td>
<ul>
	 <li><big><b>Навыки:</b></big><ul>
	 <li>Пайки, присуствуют</li>
	 <li>Конструирования, присуствует</li>
	 <li>Работы в программах САПР, отсуствуют</li>
	  <li>Создание программ для ЧПУ станка, отсуствуют</li>
     <li>Создания БПЛА, отсуствуют</li>
	 <li>web - Дизайна, отсуствуют</li>
	 <li>Езды на роликах присуствуют</li>
	 <li>Езды на скейте присуствуют</li>
	 </li></ul>
	 <li><big><b>Достижения:</b></big><ul>
	 <li>Занятие баскетболом</li>
	 <li>Занятия волейболом</li>
	  <li>Занятия футболом</li>
	   <li>Постоянный член кооманды группы в спортивных мероприятиях</li>
</td>
	 <td>
	 <ul>
	 <li><big><b>Навыки:</b></big><ul>
	 <li>Пайки, присуствуют</li>
	 <li>Конструирования, присуствует</li>
	 <li>Работы в программах САПР, присуствуют</li>
	  <li>Создание программ для ЧПУ станка, отсуствуют</li>
     <li>Создания БПЛА, отсуствуют</li>
	 <li>web - Дизайна, отсуствуют</li>
	 <li>Езды на роликах присуствуют</li>
	 </li></ul>
	 <li><big><b>Достижения:</b></big><ul>
	 <li>Занятие фигурным катанием</li>
	 <li>Занятия ганболом</li>
	 </td>
</a>
</table>
<div id="backcallmsgdiv">
    <a href="#">
        <div id="close">X</div>
    </a>
</div>
<script>
var table=document.getElementById('tablica');
document.getElementById('contactUs').addEventListener('click',function(e){
	e.stopPropagation();
	table.style.display='block';
});
document.addEventListener('click',function(){
	table.style.display='none';
});
</script>
</body>


var table=document.getElementById('tablica');
document.getElementById('contactUs').addEventListener('click',function(e){
	e.stopPropagation();
	table.style.display='block';
});
document.addEventListener('click',function(){
	table.style.display='none';
});

MelvinBlood 30.10.2017 15:45
К сожалению не работает

Nexus 30.10.2017 15:48
Цитата:
Сообщение от MelvinBlood
К сожалению не работает
А по-моему все чудесно работает.

MelvinBlood 30.10.2017 15:59
Эм, только что опрробовал, ни в какую. Таблица скрыта через стиль display:none

ksa 30.10.2017 16:27
Цитата:
Сообщение от MelvinBlood
только что опрробовал, ни в какую
Ты бы хоть примеры свои показывал для подтверждения содеянного...

MelvinBlood 30.10.2017 19:33
Что конкретно требуется показать, а то я дуб дубом


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