javascript — JS PopUp окна из разных источников

Мне нужно сделать простое всплывающее окно 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"));
});
});

Может ли кто-нибудь мне помочь и посоветовать, как отсортировать эти ссылки, чтобы открыть всплывающее окно, связанное с каждой ссылкой? Может быть, сортировать это с некоторым идентификатором или так?

понимать

1

Решение

У меня есть 2 решения:

  1. в html создайте скрытые всплывающие окна для всех команд с id = «popup-team-1», а в вашей ссылке добавьте дополнительный атрибут <a data-id="1".. В JavaScript сделать что-то вроде этого:

var id = $(this).attr("data-id");
$("#popup-team-"+id).show();

  1. загрузить содержимое всплывающего окна с сервера

    $.get(url).done(function (content) {
    $(".popup").html(content).show();
    })
    
1

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector