在没有任何点击事件的情况下打开MaterialiseCSS模态

Question

我使用了materializecss modal中的相同示例。

这里的问题是在来自锚点的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
   });
});

Answer 2

无法重现上述问题Fiddle

模式在来自锚点

的点击事件之前打开

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.modal-trigger').leanModal({
    dismissible: true,
    opacity: .5,
    in_duration: 300,
    out_duration: 200,
  });
});

＆＃13;

<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">Specialization</a>
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

除非你在JS文件或页面中的某个地方有以下$('#modal1').openModal();，否则会在页面上打开模态加载/ DOM就绪Fiddle

＆＃13;

＆＃13;

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

＆＃13;

<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">Specialization</a>
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;