Foundation 显示无法识别模态链接答案

【问题标题】：Foundation reveal doesn't recognise modal linkFoundation 显示无法识别模态链接
【发布时间】：2013-10-23 11:33:44
【问题描述】：

我在网站上为模态框使用了基础显示，但是当我单击模态触发链接时，它不会将其视为模态，而只会看到锚点“#”。该网站是 dev.birddartmouth.co.uk

这是我输出的模态 HTML：

<a href="#" class="item" data-reveal-id="292">
    <img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg">
</a>

<div id="292" class="reveal-modal">
    <i class="close icon close-reveal-modal"></i>
    <div class="header">
        Bow tie neck silk overlay top/dress with sequin hem – cream, grey                                           <p>£0</p>
    </div>
    <div class="content">
        <img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg">
    </div>
</div><!-- /modal -->

foundation.min.js 和foundation.reveal.js 文件都加载到了头部。我已按照基金会文档 (http://foundation.zurb.com/docs/components/reveal.html) 上的说明进行操作 - 谁能看到我做错了什么？

【问题讨论】：

标签： jquery modal-dialog zurb-foundation

【解决方案1】：

代码没有问题。您可以尝试使用 Jquery 手动打开模式

<a href="#" class="item" data-reveal-id="292">
<img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg" width="200" height="200">

<div id="292" class="reveal-modal"> <i class="close icon close-reveal-modal">x</i> //x for close button

    <div class="header">Bow tie neck silk overlay top/dress with sequin hem – cream, grey
        <p>£0</p>
    </div>
    <div class="content">
        <img src="http://dev.birddartmouth.co.uk/wp-content/uploads/2013/10/096.jpg">
    </div>
</div>

jQuery

$(document).on('click', '.item', function () {
    var id = $(this).attr('data-reveal-id');
    $('#' + id).foundation('reveal', 'open');
});


$(document).on('click', '.close-reveal-modal', function () {

    $(this).parent().foundation('reveal', 'close');
});

Jsfiddle http://jsfiddle.net/rFLE3/

【讨论】：

谢谢 - 这正是我最终所做的，现在它可以工作了。