基金會4顯示與jQuery不工作的模態

Question

我想通過使用jQuery打開揭示窗口，它不工作。我想知道你能否幫忙。代碼如下

<div class="row"> 

<a id="open" href="#" class="button">Click Me For A Modal</a> 

<div id="myModal" class="reveal-modal [expand, xlarge, large, medium, small]"> 
    <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> 

<script type="text/javascript"> 
$(document).ready(function() { 
$("a.button").click(function() { 
    $("#myModal").reveal(); 
}); 
}); 
</script> 

Answer 1

我會做這樣

<div class="row"> 
      <div class="large-12 columns"> 
       <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> 
     </div> 
     <div class="row"> 
      <div class="large-6 columns"> 
       <div class="panel"> 
        <p><a href="#" data-reveal-id="myModal">Open with Data Reveal</a></p> 
       </div> 
      </div> 
      <div class="large-6 columns"> 
       <div class="panel"> 
        <p><a class="foundation-open" href="http://google.com">Open with jQuery</a></p> 
       </div> 
      </div> 
     </div> 

而且腳本（注意你的腳本必須是jQuery的後之前不會，否則你會得到你提到的錯誤）

<script src="js/jquery.js"></script> 
    <script src="js/foundation.min.js"></script> 
    <script>$(document).foundation();</script> 
    <script type="text/javascript"> 
    jQuery(document).ready(function($){ 
    $('a.foundation-open').click(function(e){ 
     e.preventDefault(); 
    $('#myModal').foundation('reveal', 'open'); 
    }); 
    }); 
    </script> 

Answer 2

當您使用兩個不同的JS庫衝突，應該在那裏。

jQuery(document).ready(function($) { 

    $("a.button").click(function() { 

    $('#myModal').reveal(); 

     }); 

    });