在 Materializecss 中初始化 Javascript 模態是如何工作的？
[英]How Does Initalizing a Javascript Modal Work in Materializecss?
問題描述
我看到了其他答案，但我仍然不明白初始化 javascript 的含義以及我應該如何將 javascript 部分添加到我的 HTML 頁面？ 如果我想在我的 HTML 頁面中包含這個模式：
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
有人告訴我，我需要先使用以下代碼對其進行初始化：
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
如果我將此（javascript 部分）添加到material.js的末尾，則沒有效果。 如果我將它添加到 HTML 頁面中並使用如下方式將其環繞：
<script>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
1 個解決方案
解決方案1
1 已采納 2020-11-25 00:54:27
您可以使用常規 JavaScript 來初始化它，而不是您正在使用的 jQuery：
M.Modal.init(document.getElementById('modal1'));
您可以將該代碼放在<script>標記中或包含一個 .js 文件，但請確保在模態<div>和 Materialize 源下方執行此操作。
完整的代碼可能如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Modal test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
<script>
M.Modal.init(document.getElementById('modal1'));
</script>
</html>
如何更改模態 materializecss 的大小
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.