2016-07-13 4 views
0

Ich versuche, Foundation zu verwenden, um das Enthüllungsmodal zum Funktionieren zu bringen. Wenn ich auf den unten stehenden Link klicke, passiert nichts. Wenn ich die Seite lade, wird der Inhalt im Modal angezeigt, aber es sieht sehr seltsam aus. Wie man in der Grundlage schwimmt, um richtig zu arbeiten?

<!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

Antwort

1

Verwenden Sie Foundation 6 Beispiele?

Statt data-reveal-id verwenden data-open oder data-toggle Ziel Ihre offenbaren:

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

Daten offen öffnet die modal aber es sieht jetzt sehr seltsam ... ich oben ein Bild enthalten werden. – sharataka

+0

Haben Sie benutzerdefinierte Stile angewendet? Wenn Sie nur Foundation Stylesheets verwenden, sieht es immer noch gleich aus? – Simon