Question

我一步一步地遵循Foundation Modal示例，因为我需要在点击图像后在模态内打开一个滑块图库，但它根本不起作用。阅读我理解的文档可以打开一个模态，而不需要Javascript和jQuery，只需使用启动器中的data-reveal-id和你要打开的div模式中的数据显示。至少是我所理解的。由于它没有工作，我也试过jQuery，但它既不工作也没有。而且我在控制台中没有错误，所以我不怀疑它在哪里可能是错误。我不得不说模态div甚至没有隐藏，尽管我有aria-hidden =＆＃34; true＆＃34; 。任何线索??

这是我的第一次尝试

<link rel="stylesheet" href="assets/css/foundation.css">
<link rel="stylesheet" href="assets/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="assets/css/app.css">
<script src="assets/js/modernizr.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/foundation.min.js"></script>

<div class="main-img">
  <a href="" data-reveal-id="galleryModal"><img src="assets/images/2.png" alt=""></a>
</div>

<div id="galleryModal" class="reveal-modal full" data-reveal aria-labelledby="galleryModalTitle" aria-hidden="true" role="dialog">
  <h2 id="galleryModalTitle">This modal has a gallery</h2>
  <div class="row">
    <div class="large-1 medium-1 columns">
      <button class="button-slider-gallery previous-button fa fa-chevron-left" id="prev" value="prev"></button>
    </div>
    <div class="large-10 medium-10 columns">
      <div class="slider-gallery">
        <div class="image">
          <img class="width-images" data-lazy="assets/images/paisaje1.jpg">
        </div>
        <div class="image">
          <img class="width-images" data-lazy="assets/images/paisaje2.jpg">
        </div>
        <div class="image">
          <img class="width-images" data-lazy="assets/images/paisaje3.jpg">
        </div>
      </div>
    </div>
    <div class="large-1 medium-1 columns">
      <button class="button-slider-gallery next-button fa fa-chevron-right" id="next" value="next"></button>
    </div>
  </div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

//At the end of the page, just before the body closed tag

<script type="text/javascript" src="slick/slick.min.js"></script>

<script>
  $(document).ready(function(){
    $('.slider-gallery').slick({
      lazyLoad: 'ondemand',
      slidesToShow: 1,
      slidesToScroll: 1
    });
  });

  $('#prev').click(function(){
    $(".slider-gallery").slick('slickNext');
  });

  $('#next').click(function(){
    $(".slider-gallery").slick('slickPrev');
  });
</script>

这是我的第二次尝试

//几乎相同但更改了启动器和模态的id并添加了一个JQuery函数

<div class="main-img">
  <a href="" id="modalLauncher"><img src="assets/images/2.png" alt=""></a>
</div>

<div id="galleryModal" class="reveal-modal full" data-reveal aria-labelledby="galleryModalTitle" aria-hidden="true" role="dialog">
  <h2 id="galleryModalTitle">This modal has a gallery</h2>
  <div class="row">
    <div class="large-1 medium-1 columns">
      <button class="button-slider-gallery previous-button fa fa-chevron-left" id="prev" value="prev"></button>
    </div>
    <div class="large-10 medium-10 columns">
      <div class="slider-gallery">
        <div class="image">
          <img class="width-images" data-lazy="assets/images/paisaje1.jpg">
        </div>
        <div class="image">
          <img class="width-images" data-lazy="assets/images/paisaje2.jpg">
        </div>
        <div class="image">
          <img class="width-images" data-lazy="assets/images/paisaje3.jpg">
        </div>
      </div>
    </div>
    <div class="large-1 medium-1 columns">
      <button class="button-slider-gallery next-button fa fa-chevron-right" id="next" value="next"></button>
    </div>
  </div>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

// This also before the body close tag

<script>
  $("#modalLauncher").click(function (e) {
    $('#galleryModal').foundation('reveal', 'open');
  });
</script>

单击后基础模态不会打开

0 个答案: