Question

我需要制作一个简单的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"));
  });
});

有人可以帮助我并建议我如何将这些链接排序到打开与每个链接相关的弹出窗口？也许用一些ID来排序？

欣赏

Answer 1

我有2个解决方案：

在html中为所有具有id =＆＃34; popup-team-1＆＃34;的团队创建隐藏弹出窗口，并在您的链接中添加其他属性<a data-id="1"..，在javascript中执行以下操作：

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

从服务器

加载弹出窗口的内容

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

来自不同来源的JS PopUp窗口

1 个答案: