javascript - 页面加载后将 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 将内容加载到模式中。

Reveal modal 可以让你做到这一点

<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');
    }
});

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