show bootstrap modal по правому клику - несколько модалов

Question

Если пользователь щелкает изображение, я хочу показать модальный вариант с общими параметрами для этого изображения. У меня есть рабочий скрипт для одного изображения, но я стараюсь показать модальности для нескольких изображений.

Вот сценарий, который, как я думаю, показывает, чего я хочу достичь. jsfiddle demo

$("[data-toggle='modal']").on("contextmenu", function(e) { 
    e.preventDefault(); 
    //$("#embed1").modal("show");/*works great for one image with one related modal*/ 
    $(this).modal("show"); /*not working on right click. Problem is each image has a different modal specific to that image*/ 
}) 

Answer 1

В текущем коде this относится к каналу, который кликнул, а не модальный.

Вы должны захватить атрибут data-target и использовать его как модальный селектор, как это ...

$("[data-toggle='modal']").on("contextmenu", function(e) { 
    e.preventDefault(); 
    var targetModal = $(this).data('target'); 
    $(targetModal).modal("show"); 
}) 

DEMO

Answer 2

Попробуйте добавить уникальный «данные-Toogle» для каждого изображения с id dynamycaly. Создайте соответствующую модель, чтобы показать динамику.

Я использую вещи, как это:

На моей кнопке называется для каждой программы (вы работаете на изображении, это то же самое):

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#delete{{ $programme->id }}">Supprimer</button> 

И теперь мои модальности, для каждая программа:

 <!-- Modal --> 
    <div id="delete{{ $programme->id }}" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Suppression d'un programme</h4> 
      </div> 
      <div class="modal-body"> 
      <form method="post" action="{{url()}}/admin/delete_programme"> 
      <p>Êtes-vour sûr de vouloir supprimer le programme suivant : {{ $programme->nom }}</p> 
      </div> 
      <div class="modal-footer"> 
       <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>"> 
       <input type="hidden" name="id_programme" value="{{ $programme->id }}"> 
       <button type="submit" class="btn btn-default">Oui</button> 
      </form> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Non</button> 
      </div> 
     </div> 

     </div> 
    </div> 

Надеюсь, вы меня поняли, извините за мой плохой английский (я на самом деле французский).