Foundation 6'da Modal çalışmalarını nasıl yapabilirim?

Niçin bu basit modalın neden çalışmadığını bilmiyorum ... Neyi özlüyorum?Foundation 6'da Modal çalışmalarını nasıl yapabilirim?

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

Ve burada dosyalar şunlardır:

kaynak

2016-04-13 sanlorena

iyi kodunuzu formated Can ediniz. JS vakıf komut dosyasını eklediniz mi? – general03

Sizin çapa niteliğini data-open="myModal" veya data-toggle="myModal" olmalıdır. Kapat düğmeniz de data-close olmalıdır.

kaynak

2016-04-13 16:46:18 EddieDean

Size, açığa Vakfı 5 kullanıyorsunuz ben biçimlendirdikten Vakfı 6.

için değişmiş olduğu görülüyor senin açık çapası ve veri-yakın kapatma düğmesine veri açık ekleyerek aşağıda codeblock ortaya ve, ortaya blok class="reveal" olması:

 <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 Vakfı 6 Reveal: http://foundation.zurb.com/sites/docs/reveal.html

kaynak

2016-04-14 13:36:03

Foundation 6'da Modal çalışmalarını nasıl yapabilirim?

cevap

İlgili konular