Materialise css 模态 - 输入问题

Question

我正在尝试实现一个模态，其中包含来自第一个模态的输入类型文本，但是一旦触发第二个模态，输入字段就会被停用。有人知道我该如何解决这个问题吗？

请在下面的 Jsfiddle link 中找到示例： Modals

<div id="modal2" class="modal">
<div class="modal-content">
  <h4>Modal Header</h4>
  <p>A bunch of text</p>
  <input type=text/>
</div>
<div class="modal-footer">
  <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
 </div>
  <div id="modal1" class="modal">
     <div class="modal-content">
       <h4>Modal Header</h4>
        <p>A bunch of text</p>
        <a class="waves-effect waves-light btn modal-trigger" href="#modal2">Modal</a>
   </div>
  <div class="modal-footer">
       <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
   </div>
  </div>
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>


 <script>
   $(document).ready(function () {
       $('.modal').modal();
   });
 </script>

Answer 1

我认为问题出在您使用的版本上，最快的解决方案是更改版本

来自

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

到

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Materialise css 模态 - 输入问题

Materialize css Modal - input issue

html

css

jquery

modal-dialog

materialize