基金会4显示不工作？

页：http://www.bureauforgood.com/RSTR-IA-2B/1.1-Home-Modal.html 基金会4显示不工作？

近体标签，我有以下的结尾：

<script src="javascripts/jquery.js"></script> 
    <script src="javascripts/foundation4.min.js"></script> 
<script src="javascripts/foundation.reveal.js"></script>

（请注意，我改变了js文件，以“foundation4”的名称，这个变化工作正常，我知道这是因为轨道是工作）

跟此

<div id="myModal" class="reveal-modal"> 
    <h2>Awesome. I have it.</h2> 
    <p class="lead">Your couch. It is mine.</p> 
    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p> 
    <a class="close-reveal-modal">&#215;</a> 
</div> 
    <div class="reveal-modal-bg" style="display: none"></div> 
    <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

然后我关闭主体和html标签。

（用于测试目的，我把我的按钮就在页面的底部，纳页脚）

在我的CSS文件，我确信这是包括（自带了所有的显示相关的CSS与基金会）

.reveal-modal-bg { 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    background: black; 
    background: rgba(0, 0, 0, 0.45); 
    z-index: 98; 
    display: none; 
    top: 0; 
    left: 0; } 

.reveal-modal { 
    visibility: hidden; 
    display: none; 
    position: absolute; 
    left: 50%; 
    z-index: 99; 
    height: auto; 
    margin-left: -40%; 
    width: 80%; 
    background-color: white; 
    padding: 1.25em; 
    border: solid 1px #666666; 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); 
    top: 50px; } 
    .reveal-modal .column, 
    .reveal-modal .columns { 
    min-width: 0; } 
    .reveal-modal > :first-child { 
    margin-top: 0; } 
    .reveal-modal > :last-child { 
    margin-bottom: 0; } 
    .reveal-modal .close-reveal-modal { 
    font-size: 1.375em; 
    line-height: 1; 
    position: absolute; 
    top: 0.5em; 
    right: 0.6875em; 
    color: #aaaaaa; 
    font-weight: bold; 
    cursor: pointer; } 

@media only screen and (min-width: 768px) { 
    .reveal-modal { 
    padding: 1.875em; 
    top: 6.25em; } 
    .reveal-modal.tiny { 
     margin-left: -15%; 
     width: 30%; } 
    .reveal-modal.small { 
     margin-left: -20%; 
     width: 40%; } 
    .reveal-modal.medium { 
     margin-left: -30%; 
     width: 60%; } 
    .reveal-modal.large { 
     margin-left: -35%; 
     width: 70%; } 
    .reveal-modal.xlarge { 
     margin-left: -47.5%; 
     width: 95%; } } 
@media print { 
    .reveal-modal { 
    background: white !important; } }

但该插件不工作！有任何想法吗？

来源

2013-09-30 MDLG

没有什么错与您的任何代码，只要确保总是完全包含以下关闭您的标记之前的片段：

<script> 
document.write('<script src=' + 
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + 
'.js><\/script>') 
</script> 
<script src="js/foundation.min.js"></script> 
<script> 
$(document).foundation(); 
</script>

还只是一个建议，你可以添加一个按钮类到你的锚标签，使它看起来更酷。像这样：

<a href="#" data-reveal-id="myModal" class="button">Click Me For A Modal</a>

来源

2014-06-13 18:12:58 Gela

您需要包括这个脚本

<script src="javascripts/foundation/foundation.reveal.js"></script>

来源

2013-09-30 17:28:28 Mike

是的，我只是注意到并包括它，并在这里编辑在Stackoverflow。它仍然不起作用。 – MDLG

您试图从哪个按钮调用模式？你需要给它一个data-reveal-id =“myModal”的属性。我注意到滑块中的按钮没有该属性。 – Mike

该按钮位于页脚下，并具有该属性。我实际上找出了问题（参见上文）。 – MDLG

好了，解决了。我忘了，包括这个

<script> 
    $(document).foundation(); 
    </script>

来源

2013-09-30 17:38:42 MDLG

基金会4显示不工作？

回答

相关问题