Как создать динамическое всплывающее окно 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

Чтобы привязать всплывающее действие к нескольким изображениям, я предлагаю использовать один общий класс, а не последовательные идентификаторы.

$(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's 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's data() метод для доступа к различным атрибутам данных выбранного элемента.

   $(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>

Я не включил Чуи в свои демонстрации, но концепции все еще должны быть применимы.