仅当用户单击关闭 btn 时，如何关闭物化模式？答案

【问题标题】：How to close Materialize modal only when user clicks on close btn?仅当用户单击关闭 btn 时，如何关闭物化模式？
【发布时间】：2015-12-19 15:52:28
【问题描述】：

我只想在用户单击关闭按钮时关闭模式。我知道，如何在 Bootstrap 中做到这一点。你能帮助 Materialize 吗？

【问题讨论】：

标签： modal-dialog materialize

【解决方案1】：

您可以使用页面底部Here 的选项自定义Materialize modal 的行为

将选项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>

【讨论】：

$("#modal_id").modal('open', {dismissible: true, complete: function() { console.log('Close modal'); } }) 用于关闭和打开putdismissible en false, 那是为了实现

【解决方案2】：

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

试试这个它对我有用

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

这些方法都不适合我。但是，确实如此，

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

【讨论】：

$('#modal1').openModal({ dismissible: false}); 做到了！

【解决方案6】：

只需将 data-backdrop 属性设置为静态即可。

【讨论】：

【解决方案7】：

leanModal()、openModal() 和 closeModal() 对我来说都失败了。从那时起，事情一定发生了变化。而是：

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

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

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

【讨论】：

Materialize 从 LeanModal 切换到 modal 版本 0.97.8

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

遇到需要做类似的事情，并认为我会与其他正在寻找它的人分享。我正在使用 Materialize 1.0.0，上面的建议都不适合我。基本上，我们希望能够控制模态框的“可关闭”属性，并在我们想要的任何时候，从我们想要的任何地方更改它，无论它是在模态框打开之前还是之后都无关紧要。我发现最优雅的方式就是这样做。这将控制当用户在其区域之外单击时模态的行为消失。

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

modal 参数是你的模态 div。

希望对您有所帮助。

【讨论】：

【解决方案10】：

纯 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";
  }
}

【讨论】：

【解决方案11】：

$(".modal4").addClass('modal-close');

其中 modal4 是您要关闭的模态类

【讨论】：

【解决方案12】：

在 Vue Js 中，使用 materialize-css package

安装包npm i materialize-css
导入包import M from 'materialize-css';
在您的eventListener 中附加以下代码，例如click

methods: {
    closeMaterializeModal(){
       var elem = document.getElementById("modal4");
      var instance = M.Modal.getInstance(elem);
      instance.close();
    }
}

【讨论】：

【解决方案13】：

以下代码对我有用。

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

参考：materializecss

【讨论】：