如何創建動態彈出式jQuery

Question

我找到了這個Jquery移動彈出示例：

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="../chui/chui-3.9.0.js"></script>

$(function() {      
    ///////////////////
    // Initialize Popup
    ///////////////////
    $("#openPopup").bind("singletap", function() {
      $.UIPopup({
        id: "warning",
        title: 'Attention Viewers!', 
        message: 'The performance of "Merchant of Venice", Act 4 scene 1, will begin shortly. Thank you for your patience.', 
        cancelButton: 'Skip', 
        continueButton: 'Stay', 
        callback: function() {
          var popupMessageTarget = document.querySelector('#popupMessageTarget');
          popupMessageTarget.textContent = 'Thanks for staying with us a bit longer.';
          popupMessageTarget.className = "";
          popupMessageTarget.className = "animatePopupMessage";
        }
      });
    });             
});

圖片元素：
img src ='images / Google-Maps.png'id ='openPopup'/>

我還有大約10個動態填充的圖像元素（id =“ openPopup”，id =“ openPopup1”，id =“ openPopup2” ...等）。 圖像元素應顯示具有不同內容的彈出窗口。 如何將功能動態地附加到每個元素上！

chui-3.9.0.js可以在這里找到： https : //github.com/sourcebits-robertbiggs/chui/blob/master/dist/chui/chui-3.9.2.js

Answer 1

要將彈出操作綁定到多個圖像，我建議使用一個公共類而不是順序ID。

 $(function() { $(".openPopup").on("click", function() { $('#output').text($('#output').text()+'Clicked! '); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://lorempixel.com/100/50/abstract/1/" class="openPopup" /> <img src="http://lorempixel.com/100/50/abstract/2/" class="openPopup" /> <img src="http://lorempixel.com/100/50/abstract/3/" class="openPopup" /> <div id="output"></div> 

要根據單擊的元素來更改彈出窗口的內容，建議使用以下方法之一：

1. 引用您先前填充的JavaScript對象。

   使用jQuery的index()來確定被單擊元素在所選元素集中的位置。 使用該整數引用JavaScript對象的相關部分。

    var popup_data = { '1': { 'title': 'Title #1', 'description': 'Description #1' }, '2': { 'title': 'Title #2', 'description': 'Description #2' }, '3': { 'title': 'Title #3', 'description': 'Description #3' } }; $(function() { $(".openPopup").on("click", function() { var index = jQuery(this).index(), this_data = popup_data[index]; $('#output').html(this_data.title + "<br />" + this_data.description); }); }); 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://lorempixel.com/100/50/abstract/1/" class="openPopup" /> <img src="http://lorempixel.com/100/50/abstract/2/" class="openPopup" /> <img src="http://lorempixel.com/100/50/abstract/3/" class="openPopup" /> <div id="output"></div> 

2. 從數據屬性讀取值。

   使用jQuery的data()方法訪問clicked元素的各種數據屬性。

    $(function() { $(".openPopup").on("click", function() { var $this = jQuery(this), title = $this.data('title'), description = $this.data('description'); $('#output').html(title + "<br />" + description); }); }); 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://lorempixel.com/100/50/abstract/1/" class="openPopup" data-title="Title #1" data-description="Description #1" /> <img src="http://lorempixel.com/100/50/abstract/2/" class="openPopup" data-title="Title #2" data-description="Description #2" /> <img src="http://lorempixel.com/100/50/abstract/3/" class="openPopup" data-title="Title #3" data-description="Description #3" /> <div id="output"></div> 

我沒有在演示中包含Chui，但是這些概念仍然適用。