0

我在网站上使用模态显示的基础显示，但是当我单击模态触发链接时，它不会将其视为模态，而只会看到锚点“#”。该网站是 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 文件都加载在head 中。我已经按照基础文档（http://foundation.zurb.com/docs/components/reveal.html）上的说明进行操作——谁能看到我做错了什么？

4

1 回答 1

0

代码没有问题。您可以尝试使用 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/

于 2013-10-23T12:27:23.267 回答