[英]what is the best way to show the pop-up on click of an image?
Here I have a jsFiddle 这里我有一个jsFiddle
you can See there are 3 images of Players now What I want is Whenever I click on the image it should show the pop-up below the players. 您可以看到现在有3张播放器图像我想要的是每当我单击图像时,它应该在播放器下方显示弹出窗口。
Player can be In any position it will not be in a grid
so My question is What is the best way perform this. 所以我的问题是执行此操作的最佳方法是什么
I have something in my probably the wast it is like.. 我可能在浪费一些东西,就像..
-- whether onclick of an Image I should change the position of the position of the popup image as well as span tag's text. -是否点击图片,我应该更改弹出图片以及span标签文本的位置。
-- I should provide a popup to the every Player and just hide and show them -我应该为每个玩家提供一个弹出窗口,然后隐藏并显示它们
or something else you can suggest.It will help me a lot. 或其他您可以建议的方法。它将对我有很大帮助。
#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>
Thank you for spending time for me in advance Thank you. 谢谢您提前为我度过时间。谢谢。
<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>
Script: 脚本:
$("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: 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;
}
Demo: https://jsfiddle.net/astm1o3p/21/ 演示: https : //jsfiddle.net/astm1o3p/21/
Here make chqnges in the css for popup set 在这里在弹出窗口的CSS中设置chqnges
position:absolute;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.