javascript - 单击图像时显示弹出窗口的最佳方式是什么？

Question

这里我有一个 jsFiddle

你可以看到现在有 3 张球员的图片我想要的是每当我点击图片时它应该在球员下方显示弹出窗口。

播放器可以在任何位置，它不会在网格中

所以我的问题是执行此操作的最佳方式是什么。

我的肚子里可能有东西，它就像..

-- 图像的点击是否应该改变弹出图像的位置以及span标签的文本。

-- 我应该为每个玩家提供一个弹出窗口，然后隐藏和显示他们

或者您可以提出的其他建议。这对我有很大帮助。

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>   

<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>


 </code></pre>
</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/

这里对弹出集的CSS进行修改

position:absolute;