javascript - JS PopUp windows from different sources -
i need make simple js popup view specific content of each link (team stats). i've got basic html set should popup mentioned content.
<!-- start team-players --> <div class="team-players"> <div class="player-profile"> <img data-js="open" src="img/team-ico/team-srsne.jpg" alt="" class="thumbnail"> <span class="number">#1</span> <span class="name">hk sršňe košice</span> </div> <div class="player-profile"> <img data-js="open" src="img/team-ico/team-kvp.jpg" alt="" class="thumbnail"> <span class="number">#2</span> <span class="name">hk kvp represent</span> </div> <div class="player-profile"> <img data-js="open" src="img/team-ico/team-warriors.jpg" alt="" class="thumbnail" > <span class="number">#3</span> <span class="name">hk spartan warriors</span> </div>
etc...
at end there popup opening code:
<div class="container"> <button data-js="open">open popup</button>
<div class="popup"> <h2>$team_name (team name, selected links above should displayed)</h2> <button name="close">close popup</button>
javascript code:
function popupopenclose(popup) { /* add div inside popup layout if 1 doesn't exist */ if ($(".wrapper").length == 0){ $(popup).wrapinner("<div class='wrapper'></div>"); } /* open popup */ $(popup).show().this; /* close popup if user clicks on background */ $(popup).click(function(e) { if ( e.target == ) { if ($(popup).is(':visible')) { $(popup).hide(); } } }); /* close popup , remove errors if user clicks on cancel or close buttons */ $(popup).find("button[name=close]").on("click", function() { if ($(".formelementerror").is(':visible')) { $(".formelementerror").remove(); } $(popup).hide(); }); } $(document).ready(function () { $("[data-js=open]").on("click", function() { popupopenclose($(".popup")); }); });
could me , advise how can sort links open popup window related each link? maybe sort id or so?
appreciate
i have 2 solutions:
- in html create hidden popups teams id="popup-team-1", , in link add additional attribute
<a data-id="1"..
, in javascript this:
var id = $(this).attr("data-id"); $("#popup-team-"+id).show();
load content of popup server
$.get(url).done(function (content) { $(".popup").html(content).show(); })
Comments
Post a Comment