Мне нужно сделать простое всплывающее окно JS для просмотра конкретного содержимого каждой ссылки (статистика команды). Для этого у меня есть базовая настройка HTML, которая должна отображать упомянутое содержимое.
<!-- 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>
так далее…
в конце есть код открытия всплывающего окна:
<div class="container">
<button data-js="open">Open popup</button>
<div class="popup">
<h2>$team_name (team name, which was selected for links above should be displayed)</h2>
<button name="close">Close popup</button>
Код JavaScript:
function popupOpenClose(popup) {
/* Add div inside popup for layout if one 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 == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and 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"));
});
});
Может ли кто-нибудь мне помочь и посоветовать, как отсортировать эти ссылки, чтобы открыть всплывающее окно, связанное с каждой ссылкой? Может быть, сортировать это с некоторым идентификатором или так?
понимать
У меня есть 2 решения:
<a data-id="1"..
В JavaScript сделать что-то вроде этого:var id = $(this).attr("data-id");
$("#popup-team-"+id).show();
загрузить содержимое всплывающего окна с сервера
$.get(url).done(function (content) {
$(".popup").html(content).show();
})
Других решений пока нет …