Javascript 实现模态不起作用

Materialize modal not working

提问by Ajay Kulkarni

I wrote a simple code for materialize modal.
HTML code:

我写了一个简单的代码来实现模态。
HTML代码：

<a class="waves-effect waves-light btn view" data-target="modal1">View Scores</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">Agree</a>
  </div>
</div>  

JS code:

JS代码：

$(document).ready(function() {
  // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
  /*$('.view').click(function (){
    $('#modal1').modal('open'); 
    alert('edskjcxnm');
  });*/
  /*$('.view').leanModal();*/
  $('#modal1').modal('open');
});  

JSFiddle link: https://jsfiddle.net/7f6hmgcf/
Why isn't it working?

JSFiddle 链接：https://jsfiddle.net/7f6hmgcf/
为什么不工作？

回答by Alexey

Initialize all modals first. $('.modal').modal();

首先初始化所有模态。 $('.modal').modal();

Complete code will look like this

完整的代码看起来像这样

(function ($) {
    $(function () {

        //initialize all modals           
        $('.modal').modal();

        //now you can open modal from code
        $('#modal1').modal('open');

        //or by click on trigger
        $('.trigger-modal').modal();

    }); // end of document ready
})(jQuery); // end of jQuery name space

回答by Andreas Moldskred

Not 100% sure what you are asking for here, but if what you are asking is how to trigger modal on button click you can simply do it by setting an onclick like this:

不是 100% 确定您在这里要求的是什么，但是如果您要问的是如何在按钮单击时触发模态，您可以通过像这样设置 onclick 来简单地做到这一点：

<a class="waves-effect waves-light btn view" onclick="$('#modal1').modal('open');">View Scores</a>

But before you can do $('#modal1').modal('open'); you need to initiate the modal in your js, like this:

但在你可以做 $('#modal1').modal('open'); 之前 您需要在 js 中启动模态，如下所示：

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

You can check out my solution in this fiddle: https://jsfiddle.net/AndreasMolle/7f6hmgcf/13/

您可以在这个小提琴中查看我的解决方案：https: //jsfiddle.net/AndreasMolle/7f6hmgcf/13/

Another solution might be to do it this way:

另一种解决方案可能是这样做：

<a class="waves-effect waves-light btn view" href="#modal1">View Scores</a>

回答by Alfred Alfizo Mosima

Materializecss documentation aint too clear i also struggled a bit, here's how i solved my problem.

Materializecss 文档不太清楚我也有点挣扎，这是我解决问题的方法。

  <!-- 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">Agree</a>
  </div>
  </div>

 <script>
 $(document).ready(function(){
 // the "href" attribute of .modal-trigger must specify the modal ID that   wants to be triggered
 $('.modal-trigger').leanModal();
 });
  </script>

回答by Barceyken

I recently updated my project to materializecss 0.98.0 and with this version I need to initialize modals before open it.

我最近将我的项目更新为 materializecss 0.98.0，在这个版本中，我需要在打开它之前初始化模态。

//Old
$('#modal1').openModal();

//New
$('#modal1').modal().modal('open');

I don't find any configuration like "autoOpen" on the modal initial options :(.

我没有在模态初始选项中找到任何像“autoOpen”这样的配置:(。

回答by Juan Diego Silva

$( document ).ready(function() {
  $('.modal').modal();
  $('#modal1').on('click', function() {
  });
});

https://jsfiddle.net/juands/z512cb7f/3/check this link

https://jsfiddle.net/juands/z512cb7f/3/检查此链接

回答by MrViK

Try Materialize.Modal class

尝试 Materialize.Modal 类

let modal=new Materialize.Modal($("#yourModal"));

modal.open(); //Open it on some event

modal.close(); //This is not needed as you can close it with the modal buttons. It's tricky