如何在用户点击关闭按钮时关闭Materialize模态框？

Question

如何在用户点击关闭按钮时关闭Materialize模态框？

modal-dialogmaterialize

10

我想仅在用户点击关闭按钮时关闭弹出框。我知道如何在Bootstrap中实现这一点。您能帮助解决Materialize中的问题吗？

- Brightest.Sirius

13个回答

6

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

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

- Wouter Schoofs

5

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

试一试这个，对我有用。

- Tauseef

2

以下代码适用于我使用的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>

- Forcuti Alessandro

1

对我来说，这些方法都没有起作用。然而，以下方法有效：

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

- Chandan Purohit

$('#modal1').openModal({ dismissible: false}); 成功了！ - angelcool.net

1

对我来说，leanModal()、openModal()和closeModal()都失败了。可能是因为事情发生了改变。取而代之的是：

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

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

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

- mac

Ma terialize 在版本 0.97.8 中从 leanModal 切换到 modal。 - mac

0

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

其中，modal4是您想要关闭的模态框的类名。

- ncutixavier

0

最近遇到了类似的需求，想和其他需要的人分享一下。我正在使用Materialize 1.0.0，但以上建议都对我无效。基本上，我们希望能够控制模态框的“可解散”属性，并在任何时候从任何地方更改它，而且无论模态框是在打开之前还是之后都不应该有影响。我发现最优雅的方法是这样做。这将控制模态框的行为，使其在用户单击其区域外部时不会消失。

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

其中 modal param 是你的模态框 div。

希望能有所帮助。

- Kalabaaz

0

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

- Frawel

0

在Vue Js中，通过使用materialize-css包

安装包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();
    }
}

- ncutixavier

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shehary · Accepted Answer

您可以使用选项自定义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>