show bootstrap modal on right click - multiple modals

Question

If a user right clicks an image I want to show a modal with share options for that image. I have a working fiddle for one image, but am struggling to show modals for multiple images.

Here is the fiddle that I think shows what I want to achieve. 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

In your current code this refers to the link that is clicked rather than the modal.

You need to grab the data-target attribute and use it as the modal selector like this...

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

DEMO

Answer 2

Try to add an unique "data-toogle" for each image with an id dynamycaly. Create the corresponding modelto show dynamycaly too.

I am using a thing like this :

On my button called for each program (you're working on a image, it's the same) :

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

And now my modals, for each program :

        <!-- 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>

I hope you understood me, sorry for my bad english (i'm actually french).