Question

我无法触发启示模式，我不知所措。

起初我认为这是一个JS冲突所以我删除了网站上的所有其他内容并将其归结为基础知识，一些CSS，一些JS和一些HTML，如下所示（以及http://test.jephchristoff.com/modal.html）和仍然没有运气。模态没有触发，我被卡住了。

任何人都可以帮助我吗？

<head>
<style>
.reveal-modal-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1004;
    display: none;
    left: 0; }
.reveal-modal, dialog {
    display: none;
    position: absolute;
    z-index: 1005;
    width: 100vw;
    top: 0;
    border-radius: 3px;
    left: 0;
    background-color: #FFFFFF;
    padding: 1.11111rem;
    border: solid 1px #666666;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    padding: 1.66667rem; }
.reveal-modal .close-reveal-modal, .reveal-modal dialog {
    font-size: 2.22222rem;
    line-height: 1;
    position: absolute;
    top: 0.44444rem;
    right: 0.61111rem;
    color: #AAAAAA;
    font-weight: bold;
    cursor: pointer; }
</style>
</head>
<body>
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
<div id="myModal" class="reveal-modal" data-reveal>
    <h2>Awesome. I have it.</h2>
<p class="lead">Your couch.  It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">&#215;</a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="foundation.min.js"></script>
<script src="foundation.reveal.js"></script>
<script>$(document).foundation();</script>
</body>

Answer 1

我在js和css文件上输入了正确的顺序：

$(document).ready(function(){
 $(document).foundation();
});

基金会揭示模式不开放

1 个答案:

工作小提琴：http://jsfiddle.net/robertrozas/hs2ddcfx/2/