仅当用户单击关闭 btn 时如何关闭 Materialise 模式？

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

只需将数据背景属性设置为静态。

Answer 3

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

试试这个对我有用

Answer 4

下面的代码对我有用。

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

参考：materializecss

Answer 5

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

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

Answer 6

None 的方法对我有用。然而，这样做了，

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

Answer 7

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

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

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

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

Answer 8

如果您只想插入用于关闭模式的按钮（有时 CSS 冲突将不允许模式关闭）使用此：

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

Answer 9

遇到了做类似事情的需要，我想我会把它分享给也在寻找它的其他人。我使用的是 Materialise 1.0.0，上述 none 的建议对我有用。基本上，我们希望能够控制模态的 'dismissible' 属性并随时随地更改它，无论是在模态打开之前还是之后都无关紧要.我发现最优雅的方式就是这样做。这将控制模态框的行为在用户点击其区域之外时消失。

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

模态参数是你的模态div。

希望对您有所帮助。

Answer 10

下面的代码适用于 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 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";
  }
}

Answer 12

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

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

Answer 13

在 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();
    }
}

仅当用户单击关闭 btn 时如何关闭 Materialise 模式？

How to close Materialize modal only when user clicks on close btn?

modal-dialog

materialize