JavaScript Foundation Reveal Modal Rendering

Работа с плагином для создания JavaScripts, показ (модальный). Я пытаюсь получить самый простой способ работы, но я не думаю, что правильно его называю. В моем каталоге поставщика у меня есть копии foundation.min.js и foundation.reveal.js, а затем я просто пытаюсь выполнить работу с помощью первого примера для начинающих на веб-сайте http://foundation.zurb.com/sites/docs/reveal.html.JavaScript Foundation Reveal Modal Rendering

мой index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Testing Foundation</title> 
    <script type="text/javascript" src="vendor/jQuery.js"></script> 
    <script type="text/javascript" src="vendor/foundation.min.js"></script> 
    <script type="text/javascript" src="vendor/foundation.reveal.js"></script> 
    <script type="text/javascript" src="testing.js"></script> 
    </head> 
    <body> 
    <p><a data-open="exampleModal1">Click me for a modal</a></p> 
    <div class="reveal" style="visibility: hidden" id="exampleModal1" data-reveal> 
     <h1>Awesome. I Have It.</h1> 
     <p class="lead">Your couch. It is mine.</p> 
     <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p> 
     <button class="close-button" data-close aria-label="Close modal" type="button"> 
     <span aria-hidden="true">&times;</span> 
     </button> 
    </div> 
    </body> 
</html>

testing.js

$('#exampleModal1').foundation('open');

Я не уверен, где я неправильно в моей установке для этой работы?

источник

2016-04-28 adamscott

Вы немного задумываетесь над этим. Модальный div должен находиться внутри того же html-файла, что и его.

Index.html:

<!DOCTYPE html> 
<html class="no-js" lang="en" dir="ltr"> 
    <head> 
    <link rel="stylesheet" href="css/foundation.css"> 
    </head> 
    <body> 
    <div class="row"> 
     <p><a data-open="exampleModal1">Click me for a modal</a></p> 
     <div class="reveal" id="exampleModal1" data-reveal> 
      <h1>Awesome. I Have It.</h1> 
      <p class="lead">Your couch. It is mine.</p> 
      <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p> 
      <button class="close-button" data-close aria-label="Close modal" type="button"> 
      <span aria-hidden="true">&times;</span> 
      </button> 
     </div> 
    </div> 

    <script src="js/vendor/jquery.js"></script> 
    <script src="js/vendor/foundation.js"></script> 
    <script src="js/app.js"></script> 
    </body> 
</html>

Идите вперед и инстанцирует Foundation для всего документа.

app.js:

$(document).foundation()

источник

2016-04-28 02:39:09

спасибо за помощь. Я также заметил это и попытался переместить div обратно в index.html. Тем не менее, я все еще не мог заставить модальный работать. Я также установил видимость div для скрытия, чтобы он действительно всплыл? Потому что, когда я загружаю страницу, я уже вижу содержимое своего div. Я отредактировал мой вопрос, чтобы показать вам, что я имею в виду – adamscott

@adamscott Похоже, что у вас нет связанного файла foundation.css, в котором требуется, чтобы модальный текст был скрытым, а модальный - работать. –

встроенный стиль работает хорошо, но я вижу, что вы говорите, и теперь я включил его, но он все еще не работает. – adamscott

JavaScript Foundation Reveal Modal Rendering

ответ

Смежные вопросы