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

尝试添加一个独特的＆＃34; data-toogle＆＃34;对于每个具有动态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>

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

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

2 个答案: