物化模态不起作用 [英] Materialize modal not working

问题描述

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

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

<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/
为什么不起作用?

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

推荐答案

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

Initialize all modals first. $('.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

这篇关于物化模态不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！