我想仅在用户点击关闭按钮时关闭弹出框。 我知道如何在Bootstrap中实现这一点。 您能帮助解决Materialize中的问题吗?
我想仅在用户点击关闭按钮时关闭弹出框。 我知道如何在Bootstrap中实现这一点。 您能帮助解决Materialize中的问题吗?
dismissible
更改为false
(默认情况下,模态框插件中为true
),这样只有在单击close
按钮时才会关闭模态框。$('.modalselector').leanModal({
dismissible: false
);
Example Modal
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- 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-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
$('#modalname').closeModal(); or $('#modalname').modal('close');
$(document).ready(function(){
$('#modal1').openModal({
dismissible:false
});
});
试一试这个,对我有用。
$(document).ready(function(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems,{
dismissible:false
});
var singleModalElem = document.querySelector('#login-page');
var instance = M.Modal.getInstance(singleModalElem);
instance.open();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="login-page" class="modal">
<form class="login-form">
<div class="row">
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input class="validate" id="nick_name" type="text">
<label for="nick_name" data-error="wrong" data-success="right">Nick Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a href="#" class="btn waves-effect waves-light col s12">Entra</a>
</div>
</div>
</form>
</div>
对我来说,这些方法都没有起作用。然而,以下方法有效:
$('#modal1').closeModal({ dismissible: true});
对我来说,leanModal()、openModal()和closeModal()都失败了。可能是因为事情发生了改变。取而代之的是:
$("#modal1").modal({
dismissible: false
});
$("#modal1").modal();
$(".modal4").addClass('modal-close');
其中,modal4是您想要关闭的模态框的类名。
最近遇到了类似的需求,想和其他需要的人分享一下。我正在使用Materialize 1.0.0,但以上建议都对我无效。基本上,我们希望能够控制模态框的“可解散”属性,并在任何时候从任何地方更改它,而且无论模态框是在打开之前还是之后都不应该有影响。我发现最优雅的方法是这样做。这将控制模态框的行为,使其在用户单击其区域外部时不会消失。
var m = M.Modal.getInstance(modal);
m.options.dismissible = true|false;
其中 modal param 是你的模态框 div。
希望能有所帮助。
在Vue Js中,通过使用materialize-css包
npm i materialize-css
import M from 'materialize-css';
methods: {
closeMaterializeModal(){
var elem = document.getElementById("modal4");
var instance = M.Modal.getInstance(elem);
instance.close();
}
}