javascript - MaterializeCSS 模态打开时没有任何点击事件

Question

我使用了来自 materializecss modal 的相同示例.

这里的问题是modal在anchor的click事件之前打开。

<a class="modal-trigger" href="#modal1">Specialization</a>
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div></div>

我已经添加了 JavaScript 代码:

$(document).ready(function(){
      // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
      $('.modal-trigger').leanModal({
          dismissible: true, // Modal can be dismissed by clicking outside of the modal
          opacity: .5, // Opacity of modal background
          in_duration: 300, // Transition in duration
          out_duration: 200, // Transition out duration
      });
});

第一张图片是模态触发事件之前模态打开的地方 模态触发点击事件的第二张图片

Answer 1

这篇文章有点晚了，但我想包括你应该:

• 使用最新版本的 Materialise
• 使用 modal() 函数来初始化你的模式而不自动打开它

来自documentation例如:

 $(document).ready(function(){
     $('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      inDuration: 300, // Transition in duration
      outDuration: 200, // Transition out duration
      startingTop: '4%', // Starting top style attribute
      endingTop: '10%', // Ending top style attribute
      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
          alert("Ready");
          console.log(modal, trigger);
      },
     complete: function() { alert('Closed'); } // Callback for Modal close
   });
});