Wie kann ich Reveal Modal in Foundation 6 einsetzen?

Ich bin nicht sicher, warum dieses grundlegende offenbare Modal nicht funktioniert ... was vermisse ich?Wie kann ich Reveal Modal in Foundation 6 einsetzen?

<!DOCTYPE HTML> 

<html> 

    <head> 

    <title>index</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

    <meta name="description" /> 

    <meta name="author"> 

    <!-- Style Sheets --> 

    <link rel="stylesheet" href="css/foundation.min.css" /> 

    <link rel="stylesheet" href="css/normalize.css" /> 

    <link rel="stylesheet" href="css/styles.css" /> 

    <!-- HTML% shiv --> 

    <!--[if lt IE 9]> 

     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 

     <![endif]--> 

    </head> 


    <body> 

    <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">Lorem Ipsum</h2> 

     <p class="lead">Lorem ipsum lorem.</p> 

     <p>Lorem ipsum lorem ipsum lorem ipsum.</p> 

     <a class="close-reveal-modal" aria-label="Close">&#215;</a> 

    </div> 



    <script src="js/vendor/jquery.js"></script> 

    <script src="js/foundation/foundation.min.js"></script> 

    <script src="js/vendor/fastclick.js"></script> 

    <script src="js/vendor/modernizr.js"></script> 

    <script> 
     $(document).foundation(); 

    </script> 


    </body> 

</html>

Und hier sind die Dateien:

Quelle

2016-04-13 sanlorena

können Sie gut formated Code bitte. Hast du das JS Foundation-Skript hinzugefügt? – general03

Ihr Anker data-open="myModal" oder data-toggle="myModal" das Attribut haben sollte. Ihre Schließen-Schaltfläche sollte auch data-close sein.

Quelle

2016-04-13 16:46:18 EddieDean

Es scheint, dass Sie die Stiftung 5 offenbaren verwenden, hat es für die Stiftung 6.

Ich habe Ihre unter Hinzufügen der Daten offen für Ihre offenen Anker und Daten nahe der Schließen-Schaltfläche zeigen Codeblock umformatiert geändert und der offenbare Block haben class="reveal":

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

     <div id="myModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> 
      <h2 id="modalTitle">Lorem Ipsum</h2> 

      <a class="close-button" data-close aria-label="Close">&#215;</a> 
     </div>

ZURB Foundation 6 Reveal: http://foundation.zurb.com/sites/docs/reveal.html

Quelle

2016-04-14 13:36:03

Wie kann ich Reveal Modal in Foundation 6 einsetzen?

Antwort

Verwandte Themen