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

Posted 2023-02-19

【中文标题】页面加载后将 iframe 源加载到 Foundation Modal

【英文标题】：Load iframe sources into Foundation Modal after page load

【发布时间】：2014-06-29 08:50:54

【问题描述】：

我正在使用 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   src="more-info.html" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

【参考方案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