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(); 

      });

   });

基础4揭示模式与jQuery无法正常工作

2 个答案: