Question

我目前正在开发一个包含最多4个 Media 类型div的div。媒体类型包括图像，PDF和Youtube视频。
我目前运行的代码尽可能将div创建为imgs。如果不可能（youtube videos / pdfs），则将其打开为IFrame。
截至目前，用户可以点击启动模态的imgs。但是，我无法让IFrame显示模态。
这是我的代码
HTML - 模态

    <!-- Modal -->
<div id="mediaModal" 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">title</h4>
     </div>
     <div class="modal-body">
       <p>here would be the description</p>
     </div>
     <div class="modal-media">  
       <p>here is the media</p>
     </div>
     <div class="modal-footer">
       <p>here would be the credits
     </div>
  </div>
 </div>
</div>

这是我的javascirpt

//this creates img/iframes dynamcially and throws them into a media-container div
var source = null;
    //if it is not a youtube video/pdf/txt, put it in a img tag
    if( null == ( media[1].match(/pdf/i) || media[1].match(/txt/i) || media[1].match(/youtube.com/) ) )
    {
       source = "<img data-toggle='modal' data-target='#mediaModal' id='m" + i + "'src='"+ media[1] + "'<img>";
    }
    else //throw it in a iframe tag
    {
       source = "<iframe data-toggle='modal' data-target='#mediaModal' class='modz' id='m" + i + "'src='"+ media[1] + "'></iframe>";
    }
    var div = $(source);
$("#media-container").append(div);

我尝试在iFrame中添加一个类并添加一个onClick方法，但似乎IFrame没有点击一下。

  //opens a modal box for IFrame media.
  $(".modz").on("click", function(e){
     console.log("BING");
     $("#mediaModal").modal('show');
  });

任何帮助都会很棒。谢谢！

Answer 1

您可以通过以下答案中的步骤找到答案：
stackoverflow.com adding-click-event-handler-to-iframe

将点击事件添加到IFrame，打开模式

1 个答案: