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

Question

Здесь у меня есть jsFiddle

вы можете видеть, что есть 3 изображения игроков теперь, что я хочу Когда я нажать на изображение должно показать всплывающее окно ниже игроков.

Player can be In any position it will not be in a grid

Так что мой вопрос Что такое лучший способ выполнить это.

У меня есть что-то в моем вероятно, Wast это походит ..

- будьте OnClick образом я должен изменить положение позиции всплывающего изображения, а также текст SPAN метки.

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

или что-то еще вы можете suggest.It поможет мне много.

          
  
 
   
 
    
#player-back{ 
 
    height:250px; 
 
    background:#0F0; 
 
} 
 
#p1{ 
 
    margin-top:50px; 
 
    margin-left:80px; 
 
} 
 
#p2{ 
 
    margin-left:150px; 
 
} 
 
#p3{ 
 
    margin-left:200px; 
 
} 
 
#player-popup{ 
 
     
 
    background:orange; 
 
     height:27px; 
 
     width:85px; 
 
     border-radius:10px; 
 
     text-align:center; 
 
     margin-left:50px; 
 

 
}
 
    

 

 
<div id='player-back'> 
 
     <img src='http://s6.postimg.org/su0e7812l/player1.png' id='p1'/> 
 
     <img src='http://s6.postimg.org/afpv38orx/player2.png' id='p2'/> 
 
     <img src='http://s6.postimg.org/h7ga63drh/player3.png' id='p3'/> 
 
      <div id='player-popup'> 
 
       <span>Player1</span> 
 
      </div> 
 
    </div> 
 

 

 
 
   
 
  
 
 

 

Благодарим вас за то, что потратили время на меня заблаговременно. Спасибо.

Answer 1

<div id='player-back'> 
<img src='http://s6.postimg.org/su0e7812l/player1.png' data-playerid="1" id='p1'/> 
<img src='http://s6.postimg.org/afpv38orx/player2.png' data-playerid="2" id='p2'/> 
<img src='http://s6.postimg.org/h7ga63drh/player3.png' data-playerid="3" id='p3'/> 
    <div id='player-popup' style="display:none"> 
     <span>Player1</span> 
    </div> 
</div> 

Сценарий:

$("img").click(function(){ 
var top = $(this).offset().top + $(this).width() + 2; 
var left = $(this).offset().left - $(this).height()/2; 
$("#player-popup span").text("Player "+$(this).data("playerid")); 
$("#player-popup").css({ top: top, left: left }).show(); 

}); 

CSS:

#player-back{ 
height:250px; 
background:#0F0; 
} 
#p1{ 
margin-top:50px; 
margin-left:80px; 
} 
#p2{ 
margin-left:150px; 
} 
#p3{ 
margin-left:200px; 
} 
#player-popup{ 
background:orange; 
height:27px; 
width:85px; 
border-radius:10px; 
text-align:center; 
position:absolute; 
} 

Демо: https://jsfiddle.net/astm1o3p/21/

Здесь делают chqnges в CSS для всплывающих окон установите

position:absolute;