2016-07-13 5 views
0

Я пытаюсь использовать Foundation, чтобы заставить модальность показывать. Когда я нажимаю ссылку ниже, ничего не происходит. Когда я загружаю страницу, отображается содержимое в модальном формате, но это выглядит очень странно.Как получить репутацию модального в фундаменте для правильной работы?

<!doctype html> 
    <html class="no-js" lang="en" dir="ltr"> 
     <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>Foundation for Sites</title> 
     <link rel="stylesheet" href="css/foundation.css"> 
     <link rel="stylesheet" href="css/app.css"> 
     </head> 
     <body> 
     <div class="row"> 
      <div class="large-12 columns"> 
      <h1>Welcome to Foundation</h1> 
      <a href="#" data-reveal-id="myModal">Click Me For A Modal</a> 

       <div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 
        <h2 id="modalTitle">Awesome. I have it.</h2> 
        <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> 
        <a class="close-reveal-modal" aria-label="Close">&#215;</a> 
       </div> 


      </div> 
     </div> 


     <script src="js/vendor/jquery.js"></script> 
     <script src="js/vendor/what-input.js"></script> 
     <script src="js/vendor/foundation.min.js"></script> 
     <script src="js/app.js"></script> 

     <script> 
      $('#myModal').foundation('open') 
     </script> 
     </body> 
    </html> 

enter image description here

ответ

1

Вы используете Foundation 6 примеры?

Вместо data-reveal-id используйте data-open или data-toggle для ориентации показывают:

<a href="#" data-open="myModal">Click Me For A Modal</a> 
<a href="#" data-toggle="myModal">Click Me For A Modal</a> 
+0

данных с открытым открывает модальное, но теперь это выглядит очень странно ... Я включу картинку выше. – sharataka

+0

Есть ли у вас какие-либо индивидуальные стили? Если вы используете только таблицы стилей основания, все равно выглядит так же? – Simon

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