在页面加载后将iframe源加载到Foundation Modal中

Question

我正在创建一个使用Foundation的单页组合网站，起初很简单，但是如果你点击链接模式弹出从其他页面输入html src。 但是，我想在页面加载后加载这些模态的源（大约10mb的图像试图加载）。 在jQuery / js中执行此操作的最佳方法是什么？

我有大约六种这样的模态：

<a data-reveal-id="more-info-modal" class="small round button">View Project Details</a>

<div id="more-info-modal" class="reveal-modal large" data-reveal>
  <div class="modal-frame">
    <iframe width="100%" height="600px" src="more-info.html" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Answer 1

最佳实践之一是使用AJAX将内容加载到模态中。

和显示模式让你做到这一点

<button data-reveal-id="myModal" data-reveal-ajax="http://some-url">
Click Me For A Modal
</button>

<a href="http://some-url" data-reveal-id="myModal" data-reveal-ajax="true">
Click Me For A Modal
</a>

或者您可以使用JS来配置它

    // just an url
$('#myModal').foundation('reveal', 'open', 'http://some-url');

// url with extra parameters
$('#myModal').foundation('reveal', 'open', {
    url: 'http://some-url',
    data: {param1: 'value1', param2: 'value2'}
});

// url with custom callbacks
$('#myModal').foundation('reveal', 'open', {
    url: 'http://some-url',
    success: function(data) {
        alert('modal data loaded');
    },
    error: function() {
        alert('failed loading modal');
    }
});

有关更多配置选项，请参阅此链接链接