我在我的custom-script.js文件中有它
$(document).ready(function () {
$('.modal').modal({
onOpenStart() {
console.log("Open Start");
},
onOpenEnd() {
console.log("Open End");
},
onCloseStart(){
console.log("Close Start");
},
onCloseEnd(){
console.log("Close End");
},
});
});
这就是我的模态和按钮:
<script src="./app-assets/js/custom/custom-script.js"></script>
<ul id="dropdown2" class="dropdown-content">
<li><a href="#" class="modal-trigger" data-target="modal1">Anschauen</a></li>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Arbeitsplan bearbeiten</h4>
<!-- Form Advance -->
<div class="col s12 m12 l12">
<div class="card-content">
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Abbrechen</a>
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Bestätigen</a>
</div>
</div>
在模态上单击后,模态不会被调用,模态被打开或关闭。所以我根本看不到控制台中的任何东西...
谢谢
您的语法不正确。您需要使用这些名称为属性提供函数。尝试这个:
jQuery(function($) {
$('.modal').modal({
onOpenStart: function() {
console.log("Open Start");
},
onOpenEnd: function() {
console.log("Open End");
},
onCloseStart: function() {
console.log("Close Start");
},
onCloseEnd: function() {
console.log("Close End");
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<ul id="dropdown2">
<li><a href="#" class="modal-trigger" data-target="modal1">Anschauen</a></li>
</ul>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Arbeitsplan bearbeiten</h4>
<div class="col s12 m12 l12">
<div class="card-content">
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Abbrechen</a>
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Bestätigen</a>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句