Question

Here I have a 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.

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.

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

Answer 1

View

Script:

IRefreshableViewModel ViewModel

css:

...
<li class="dropdown">
<a href="#" class="dropdown-toggle wide-nav-link" data-toggle="dropdown">TEXT_1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="class_A"><a title="Title_1" href="http://www.customurl_1.com">Title_1</a></li>
<li class="class_B"><a title="Title_2" href="http://www.customurl_2.com">Title_2</a></li>
...
<li class="class_A"><a title="Title_X" href="http://www.customurl_X.com">Title_X</a></li>
</ul>
</li>
...
<li class="dropdown">
<a href="#" class="dropdown-toggle wide-nav-link" data-toggle="dropdown">TEXT_2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="class_A"><a title="Title_1" href="http://www.customurl_1.com">Title_1</a></li>
<li class="class_B"><a title="Title_2" href="http://www.customurl_2.com">Title_2</a></li>
...
<li class="class_A"><a title="Title_X" href="http://www.customurl_X.com">Title_X</a></li>
</ul>
</li>
...

Demo: https://jsfiddle.net/astm1o3p/21/

Here make chqnges in the css for popup set

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

what is the best way to show the pop-up on click of an image?

1 个答案: