javascript - 如何用一个弹出框分别显示任意数量的信息？

Question

所以我目前有一个元素部分。此部分将包含该元素的图像，当您单击它时，将出现一个弹出框，其中包含有关该元素的更多信息。

问题

如何为任意数量的元素使用一个弹出框。因此，无论何时单击任何项​​目，都会弹出相同的弹出框(带有 css)，分别显示有关该元素的信息。

例如:

Project Gallery

When user clicks on any project

如您所见，带有信息的弹出框与单击的任何元素上显示的信息相同。

显示的图片，我有如下html:

<!-- ========= li ========= -->
<li>
  <div class="item-img">
    <img alt="Ink Transition Effect" src="img/HQCLogo.svg">
  </div>
  <div class="item-info light-bg" style="background-color: rgb(241, 241, 241)">
    <a href="http://www.hqcglobal.com"><em>HQCGlobal</em></a>  <i class="date">March 12, 2015</i>
  </div>
  <div class="feed" id="feed1">
    <div class="heart" id="like1" rel="like"></div>
    <div class="likeCount" id="LikeCount1"></div>
  </div>
</li>
<!-- ========= li ========= -->

弹出框的代码如下:

<div class="java-popup" role="alert">
  <div class="java-popup-container">
    <a href="#0" class="java-popup-close img-replace">Close</a>
    <div class="left-box">
      <img src="img/HQCLogo.svg" width="750px" />
    </div>
    <div class="right-description-box">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br />
        <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
  <!-- cd-popup-container -->
</div>
<!-- cd-popup -->

为了触发点击甚至打开弹出框，我使用了js:

  // Open popup box
  $('.item-img').on('click', function(event) {
    event.preventDefault();
    $('.java-popup').addClass('is-visible');
  });
  //close popup
  $('.java-popup').on('click', function(event) {
    if ($(event.target).is('.java-popup-close') || $(event.target).is(
      '.java-popup')) {
      event.preventDefault();
      $(this).removeClass('is-visible');
    }
  });

所以最大的问题是，如何使用我的弹出框div 根据点击的元素显示不同的信息？

谢谢 纳西布

Answer 1

您的.java-popup div 只是一个普通的HTML div。它显示为一个弹出窗口，使用 position:fixed/absolute 允许在屏幕上任意定位，并使用 z-index 将其放置在其他 DOM 元素之上。

您可以使用标准的 js/jQuery 方法将新的 HTML 内容注入(inject)子 div，例如 .html()、.append()、 .text() 等

$('#pop1').click(function(){
   $('#overlay').show();
   $('.java-popup').fadeIn();
});

$('#pop2').click(function(){
   $('.left-box').html('<img src="http://placekitten.com/50/50" />');
   $('.right-description-box').html('Any kind of HTML can go in here, divs, images, styled p tags, anything.');
   $('#overlay').show();
   $('.java-popup').fadeIn();
});

$('.java-popup-close').click(function(){
   $('#overlay').fadeOut();
   $('.java-popup').fadeOut();
});

*{position:relative;box-sizing:border-box;}
#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:black;opacity:0.7;z-index:98;display:none;}
.java-popup{display:none;position:fixed;top:20px;left:50px;width:450px;height:250px;background:white;overflow:none;z-index:99;}

.java-popup-container{overflow:hidden;}
  .java-popup-close{position:absolute;right:20px;top:0;z-index:999;}
  .left-box{float:left;width:60px;height:100%;}
  .right-description-box{float:left;width:390px;height:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="overlay"></div>
<div class="java-popup" role="alert">
  <div class="java-popup-container">
    <a href="#0" class="java-popup-close img-replace">Close</a>
    <div class="left-box">
      <img src="img/HQCLogo.svg" width="750px" />
    </div>
    <div class="right-description-box">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br />
        <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
  <!-- cd-popup-container -->
</div>
<!-- cd-popup -->
<button id="pop1">Show popup</button>
<button id="pop2">Change Info in Popup</button>