Question

我目前正在学习Bootstrap Modal和API。以下是我目前作为学习练习运行的代码。您可以在http://jahax.com/ins/查看该页面它基本上是一个通过jQuery函数访问Flickr API然后显示图片的页面。

当我点击图片时，会弹出Bootstrap Modal，但不会出现任何网站/图片。

但是，通过点击页面底部的“点击我”按钮，我可以看到Bootstrap模式中包含一个网站。

为什么我不能将jQuery函数中的信息传递给Bootstrap模式？我试过通过iframe传递图像链接和网站。有办法解决这个问题吗？

提前谢谢！

<div class="container">

    <h2 style="text-align: center;">Demonstration</h2>
    <p class="text-center">Demo of Bootstrap, jQuery & JSON API</p>
    <div class="row text-center">
    </div> 
    <div id="images" class="row text-center"> </div>

    <div class="row text-center">
    <a class="btn btn-default" data-toggle="modal" data-src="http://www.bing.com" data-height=640 data-width=800 data-target="#myModal">Click me</a>
    </div> 
</div>




<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Demo of Modal</h4>
      </div>
      <div class="modal-body">
        <iframe frameborder="0"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    // Start jQuery Function
    $(document).ready(function(){                   

        // JSON API to access Flickr               
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=winter&format=json&jsoncallback=?", displayImages);

        function displayImages(data) {                                                                                                                                 
            var iCount = 0;                             
            var htmlString = "<div class=row>";                 

            $.each(data.items, function(i,item){
                if (iCount < 18) {
                    var sourceSquare = (item.media.m).replace("_m.jpg", "_q.jpg");      

                    htmlString += '<a data-toggle="modal" class="btn" data-src="' + item.link + '" data-target="#myModal">';
                    htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
                    htmlString += '</a>';
                }
                iCount++;
            });     

        // HTML into #images DIV
        $('#images').html(htmlString + "</div>");

        // Close down the JSON function call
        }

    // End jQuery function  
    });
</script>
<script type="text/javascript">
    // Send Content to Bootstrap Modal
    $('a.btn').on('click', function(e) {
    var src = $(this).attr('data-src');
    var height = $(this).attr('data-height') || 300;
    var width = $(this).attr('data-width') || 400;

    $("#myModal iframe").attr({'src':src,
                           'height': height,
                           'width': width});
    });
</script>

Answer 1

您正在Modal Body中使用Iframe并在其中调用Flickr。第一件事是你正在使用Flickr页面链接，而Flickr不允许他们的网页在IFrame中打开。

您可以在模态窗口中直接显示图像。
HTML代码：

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Demo of Modal</h4>
      </div>
      <div class="modal-body">
        <img></img>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

jQuery代码：

$('a.btn').on('click', function(e) {
    var src = $(this).find('img').attr('src');
    var height = $(this).attr('data-height') || 300;
    var width = $(this).attr('data-width') || 400;

    $("#myModal .modal-body img").attr('src',src).css({
        height:height+'px',
        width:width+'px'
    });
});

否则，如果您想要显示幻灯片或来自Flickr的其他内容，那么您需要使用他们的API或第三方插件。

将信息从jQuery函数传递到Bootstrap Modal

1 个答案: