MaterializeCss modal 错误 openModal is not a function

Question

我有所有要求 Jquery，Materialize.js 位于我的 Js 文件上方，但是我收到警告 openModal is not a function..我检查了模式名称是否正确，我可以运行 Materialize.toast，所以我知道 Materialize.js 是在职的。使用按钮触发也不会调用模态。这是代码..

脚本：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.js"></script>
<script type="text/javascript" src="/js/video.js"></script>
<script src="/js/admin.js"></script>

触发器：

<button data-target="modal1" class="btn modal-trigger">Modal</button>

模态：

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

js:

 var modal = document.getElementById('modal1');
  modal.openModal();
$('#modal1').leanModal();
$('#modal1').openModal();

Answer 1

将压缩文件导入materialize/dist文件夹而不是materialize/js。

运行： $('#elementId').modal(); $('#elementId').modal('show');

就这样成功了。

编辑：

事实上，它在生产环境中不起作用。

所以我这样做了：

(function( $ ) {

    $.fn.showModal = function() {

        var self = this;
        try {
            this.modal();
            self.modal('open');
        } catch (err) {
            try{
                self.openModal();
            } catch (err2) {
                console.error("Something went wrong - cannot open modal.");             
            }
        }
    }


    $.fn.hideModal = function() {

        var self = this;
        try {
            this.modal();
            self.modal('close');
        } catch (err) {
            try{
                self.closeModal();
            } catch (err2) {
                console.error("Something went wrong - cannot close modal.");                
            }
        }
    }


}( jQuery ));

只使用：$('#modal').showModal()

Answer 2

好的，我遇到了同样的问题，我通过更改打开模式和初始化的调用来修复它。

如果您遇到与我相同的问题，请查看最新文档 here

这可能是新的——这里没有使用 openModal()。

初始化：

<script>
   try {
       try {
      $('#modalId').modal();
  } catch (e) {
      console.info('loading modal auto-initialized..');
  }
   }
</script>

我添加了 try/catch，因为有时不需要这样做

实施：

$('#modalID').modal('open');

Answer 3

实现函数需要 Jquery Elements。
getElementById() - 给我们 DOM 对象。

//You can either convert this Dom object to Jquery

var modal = document.getElementById('modal1');
var jquerymodal = $(modal);  //convert to jQuery Element
jquerymodal.openModal();


//Or just use Jquery Element like

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