右键单击显示bootstrap模态 - 多个模态

Question

如果用户右键单击图像，我想显示具有该图像的共享选项的模式。 我有一个工作小提琴的一个图像，但我很难显示多个图像的模态。

这是我认为表达我想要达到的目标的小提琴。 jsfiddle演示

$("[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。 创建相应的模型以显示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>

我希望你理解我，抱歉我的英语不好（我其实是法国人）。