При наведении всплывающие окна рядом

354

09 июня 2017, 08:58

Есть идентичные элементы на странице. При наведении на любой из них должно появляться всплывающее окно рядом. Но проблема в том, что при наведении всплывают окна сразу рядом со всеми, при чем при наведении на некоторые вообще ничего не происходит. Как с этим быть, подскажите пожалуйста.(присвоить каждому id не годится).

$(function() { 
	$('#info').hover( 
		function($this){ 
			$('.modalInfo').toggleClass('active');} 
			); 
      });

.modalInfo { 
  display: none; 
} 
.info { 
  display: block 
  width: 50px; 
  height: 20px; 
  background: red; 
  margin-right: 40px; 
} 
 
.modalInfo.active { 
display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<i class = "info" id="info">INFO</i> 
 
<div class = "modalInfo"> 
<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает</p> 
</div> 
 
<i class = "info" id="info">INFO</i> 
 
<div class = "modalInfo"> 
<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает</p> 
</div> 
 
<i class = "info" id="info">INFO</i> 
 
<div class = "modalInfo"> 
<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает</p> 
</div> 
 
<i class = "info" id="info">INFO</i> 
 
<div class = "modalInfo"> 
<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает</p> 
</div>

Answer 1

Во-первых на одной страницы неправильно располагать несколько элементов с одинаковыми id. Во-вторых, почему бы не вынести HTML разметку в data для удобства и чтобы не плодить кучу "модальных окон"?

По решению: есть один элемент с id=modal - это модальное окно. При наведении на .info сетаем ему позицию top и left относительно элемента, на который мы навели мышь. Получаем данные из аттрибута data-modal-text, создаем #modal и вставляем в него данные. При выходе мыши с элемента - удаляем #modal.

$('.info').hover( 
  function() { 
    let top = $(this).offset().top + $(this).height(); 
    let left = $(this).offset().left; 
    let data = $(this).data('modal-text'); 
 
    let div = document.createElement('div'); 
    div.id = 'modal'; 
    $(div).css('top', top); 
    $(div).css('left', left); 
    $(div).html(data); 
    $('body').append(div); 
  }, 
  function() { 
    $('#modal').remove(); 
  });

.info { 
  display: block width: 50px; 
  height: 20px; 
  background: red; 
  margin-right: 40px; 
} 
 
#modal { 
  width: 200px; 
  border: solid 1px black; 
  position: absolute; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<i class="info" data-modal-text="<p>Давно выяснено, что при оценке дизайна и композиции читаемый. текст мешает</p>">INFO</i> 
 
<i class="info" data-modal-text="<p>Давно выяснено, что при оценке дизайна и композиции читаемый. текст мешает</p>">INFO</i> 
 
<i class="info" data-modal-text="<p>Давно выяснено, что при оценке дизайна и композиции читаемый. текст мешает</p>">INFO</i> 
 
<i class="info" data-modal-text="<p>Давно выяснено, что при оценке дизайна и композиции читаемый. текст мешает</p>">INFO</i>

Либо, если HTML в этих "модальных окнах" может быть большим, то будет красивее представить их в виде разметки и провайдить data-modal-id:

$('.info').hover( 
  function() { 
    let top = $(this).offset().top + $(this).height(); 
    let left = $(this).offset().left; 
    let modalId = '#' + $(this).data('modal-id'); 
    let data = $(modalId).html(); 
 
    let div = document.createElement('div'); 
    div.id = 'modal'; 
    $(div).css('top', top); 
    $(div).css('left', left); 
    $(div).html(data); 
    $('body').append(div); 
  }, 
  function() { 
    $('#modal').remove(); 
  });

.info { 
  display: block width: 50px; 
  height: 20px; 
  background: red; 
  margin-right: 40px; 
} 
 
#modal { 
  width: 200px; 
  border: solid 1px black; 
  position: absolute; 
} 
 
.modal-data { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<i class="info" data-modal-id="info1data">INFO</i> 
 
<i class="info" data-modal-id="info2data">INFO</i> 
 
<i class="info" data-modal-id="info3data">INFO</i> 
 
<i class="info" data-modal-id="info4data">INFO</i> 
 
<div id="info1data" class="modal-data"> 
  <p>info1data: Давно выяснено, что при оценке дизайна и композиции читаемый. текст мешает</p> 
</div> 
 
<div id="info2data" class="modal-data"> 
  <p>info2data: Давно выяснено, что при оценке дизайна и композиции читаемый. текст мешает</p> 
</div> 
 
<div id="info3data" class="modal-data"> 
  <p>info3data: Давно выяснено, что при оценке дизайна и композиции читаемый. текст мешает</p> 
</div> 
 
<div id="info4data" class="modal-data"> 
  <p>info4data: Давно выяснено, что при оценке дизайна и композиции читаемый. текст мешает</p> 
</div>

Почитать: