2015-11-06 63 views
0

Materialize CSS中使用卡片的好方法就像點擊卡片彈出窗口一樣,它用於值的編輯和保存,它彈出回來我正在使用Phonegap將它用於android應用程序。materializecss:實現卡片

真正的問題是我無法在Materialise CSS中使用模態,因爲這在模擬器中沒有響應。模態彈出時沒有點擊。 在此先感謝。

回答

0

有時會在使用<a>標籤時發生這種情況。而不是使用<a>標籤使用<button>標籤。我已經添加了示例html代碼片段。嘗試這個。

HTML

<button data-target="modal1" class="btn modal-trigger">Click ME</button> 

<div id="modal1" class="modal"> 
    <div class="modal-content"> 
     <h4>POP UP</h4> 
    </div> 
</div> 

的JavaScript

<script> 
    $(document).ready(function() {    
     $('.modal-trigger').leanModal(); 
    }); 
</script> 

完整的代碼在一個HTML頁面。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Select</title> 
 
\t <!-- Compiled and minified CSS --> 
 
\t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 
\t <!--Let browser know website is optimized for mobile--> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
</head> 
 

 
<body> 
 
\t \t 
 
\t <button data-target="modal1" class="btn modal-trigger">Click ME</button> 
 

 
    <div id="modal1" class="modal" style="width: 360px; max-height: 100%; height: 50%;" > 
 
\t  <div class="modal-content"> 
 
\t   <h4>POP UP</h4> 
 
\t  </div> 
 
    </div>  
 

 
    \t 
 
\t <!--Import jQuery before materialize.js--> 
 
\t <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
\t <!-- Compiled and minified JavaScript --> 
 
    \t <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 
    
 
\t <script> 
 
\t \t $(document).ready(function() { 
 
      $('.modal-trigger').leanModal(); 
 
     }); 
 
\t </script> 
 

 
</body> 
 
</html>

相關問題