Question

在Materialize CSS中使用卡片是一种很好的方式，因为它用于编辑和保存值的点击卡弹出窗口，它会弹回我使用Phonegap将其用于Android应用程序。

真正的问题是我无法在Materialise CSS中使用模态，因为这在我的模拟器中没有很好的响应。弹出没有点击的模式。提前致谢。

Answer 1

有时，当您使用<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页面中的完整代码。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Select</title>
	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
		
	<button data-target="modal1" class="btn modal-trigger">Click ME</button>

    <div id="modal1" class="modal" style="width: 360px; max-height: 100%; height: 50%;" >
	    <div class="modal-content">
	        <h4>POP UP</h4>
	    </div>  
    </div>      

    	
	<!--Import jQuery before materialize.js-->
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<!-- Compiled and minified JavaScript -->
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
  
	<script>
		$(document).ready(function () {   
            $('.modal-trigger').leanModal();
        });
	</script>

</body>
</html>

＆＃13;

materializecss：卡片实现

1 个答案: