Question

我想在用户点击关闭按钮时关闭模式。我知道，如何在Bootstrap中执行此操作。你能帮忙解决Materialise吗？

Answer 1

您可以使用可在页面底部找到Here的选项自定义Materialise模式的行为

将选项dismissible更改为false（模态插件默认为true），因此只有在点击close按钮时才会关闭模式。

$('.modalselector').leanModal({
      dismissible: false
);

示例模态

$(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>

Answer 2

$(document).ready(function(){ $('#modal1').openModal({ dismissible:false }); });

试试这个对我有用

Answer 3

您可以使用以下代码关闭模态：

$('#modalname').closeModal(); or  $('#modalname').modal('close');

Answer 4

下面的代码对我来说是materialize.css 1.0.0

    $(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>

Answer 5

这些方法都不适合我。但是，这样做了，

$('#modal1').closeModal({ dismissible: true});

Answer 6

只需将data-backdrop属性设置为static。

Answer 7

下面的代码对我有用。

$('#modal1').closeModal();

参考：materializecss

Answer 8

leanModal（），openModal（）和closeModal（）对我都失败了。从那时起，事情一定发生了变化。相反：

$("#modal1").modal({
    dismissible: false
  });

甚至只是第二次调用模式：

$("#modal1").modal();

Answer 9

如果您只想插入按钮以关闭模式（有时CSS冲突将不允许模式关闭），请使用以下方法：

<span 
   class="modal-action modal-close"
   style="float:right; font-size:30px;" 
   onclick="$('#myModal2').closeModal();"
>
X
</span>

Answer 10

知道需要做一些类似的事情，并认为我也会与其他正在寻找它的人分享这一点。我正在使用Materialize 1.0.0，上面的建议对我来说都不起作用。基本上，我们希望能够控制模式的“ dismissible”属性，并在需要时随时随地更改它，无论我们希望从何处更改它，无论它是在模式打开之前还是之后都没有关系。我发现的最优雅的方式就是这样做。当用户在其区域之外单击时，这将控制模态的行为，使其消失。

    var m = M.Modal.getInstance(modal);
    m.options.dismissible = true|false;

模态参数是您的模态div。

希望有帮助。

Answer 11

纯JavaScript，就是这种方式。

将关闭模式的span元素。

var span = document.getElementsByClassName("close")[0];

要单击X来关闭模态时，可以使用它。

span.onclick = function() {
  modal.style.display = "none";
}

如果您在模态之外单击，将关闭模态。

window.onclick = function(event) {
if(event.target == modal) {
    modal.style.display = "none";
  }
}

如何在用户点击关闭btn时关闭Materialize模态？

11 个答案: