基金會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顯示不工作？

回答

相關問題