物化模式不起作用答案

【问题标题】：Materialize modal not working物化模式不起作用
【发布时间】：2017-06-17 09:50:27
【问题描述】：

我为物化模态写了一个简单的代码。
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代码：

$(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 链接：https://jsfiddle.net/7f6hmgcf/
为什么它不起作用？

【问题讨论】：

它在我的情况下不起作用
您能解释一下您遇到了哪些错误以及您为确定问题所采取的步骤吗？我不想复制你已经完成的工作。

标签： javascript jquery materialize

【解决方案1】：

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

完整的代码如下所示

(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

【讨论】：

很好的答案。 0.98 版似乎不会像只选择加入那样自动调用模态初始化。所以你需要手动完成

【解决方案2】：

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

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

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

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

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

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

&lt;a class="waves-effect waves-light btn view" href="#modal1"&gt;View Scores&lt;/a&gt;

【讨论】：

简单到极致

【解决方案3】：

MaterializeCCS 文档不太清楚，这是我解决问题的方法。

HTML

<!-- 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>

JavaScript

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

【讨论】：

它对我不起作用...我收到此错误：TypeError: $(...).leanModal is not a function
我想通了，我使用的是版本0.98，当我降级到版本'0.96'时，它工作了

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

你能解释一下这是做什么的吗？为什么这会解决 OP 的问题？提供答案时，您需要解释您提供的内容，而不仅仅是留下代码块。

【解决方案6】：

试试 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

【讨论】：