内部モーダルがマテリアライズCSSで正しく動作していない

Question

私は別の内部モーダルをトリガーするモーダルを作成しました。 内部モーダルの要素（入力テキスト）が最初に機能していません。モーダルを数回却下した後、それは働き始める。 と私がdismissibleを設定すると：false;それは凍結し始める、nothingsは働く。ここ

は、あなたが最初のモーダルの中にネストされた2番目のモーダルを持っているので、これはコード、

<div id="modal1" class="modal"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="modal-close" style="float: right;">&times;</button> 
     <div class="row"> 
     <div class="col s6" style="padding-top:25px;"> 
      <h6><b>Personal Details</b></h6> 
     </div> 
     <div class="col s6"> 
      <h6><b>Book Details</b></h6> 
     </div> 
     </div> 
    </div> 
    <div class="modal-body"> 
     <form role="form" method="post" action="thanks.php"> 
     <div class="row"> 
      <!-- personal details --> 
      <div class="col s6"> 
      <div class="row"> 
       <div class="input-field col s4"> 
       <input placeholder="" id="FirstName" name="firstname" type="text" class="validate" style="font-size:12px"> 
       <label for="first_name" style="font-size:12px;"><b>First Name</b></label> 
       </div> 
       <div class="input-field col s4"> 
       <input placeholder="" id="MiddleName" name="middlename" type="text" class="validate"> 
       <label for="middle_name" style="font-size:12px;"><b>Middle Name</b></label> 
       </div> 
       <div class="input-field col s4"> 
       <input placeholder="" id="LastName" name="lastname" type="text" class="validate"> 
       <label for="last_name" style="font-size:12px;"><b>Last Name</b></label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s2"> 
       <input name="gender" type="radio" id="male" value="Male" /> 
       <label for="male" style="font-size:12px;">Male</label> 
       </div> 
       <div class="input-field col s2"> 
       <input name="gender" type="radio" id="female" value="Female" /> 
       <label for="female" style="font-size:12px;">Female</label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s6"> 
       <input placeholder="" id="location" name="location" type="text" class="validate" style="font-size:12px"> 
       <label for="location" style="font-size:12px;">Location</label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s6"> 
       <input placeholder="" id="email" name="email" type="email" class="validate" style="font-size:12px"> 
       <label for="email" style="font-size:12px;">Email</label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s6"> 
       <input placeholder="" id="mobile" name="mobile" type="number" class="validate" style="font-size:12px"> 
       <label for="mobile" style="font-size:12px;">Mobile</label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s6"> 
       <textarea placeholder="" rows="3" id="message" name="message" class="materialize-textarea" style="font-size:12px"></textarea> 
       <label for="message" style="font-size:12px;">Message</label> 
       </div> 
       <button class="btn waves-effect waves-light" type="reset" name="reset" style="float:right;margin-left:10px;">Reset</button> 
       <button class="btn waves-effect waves-light" type="submit" name="submit" style="float:right;">post 
       <i class="material-icons right">send</i> 
       </button> 
       <a class="modal-trigger btn" href="#modal2">Second Modal</a> 
      </div> 
      </div> 
      <div id="modal2" class="modal"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="modal-close" style="float: right;">&times;</button> 
       <h6><b>Personal Details</b></h6> 
       </div> 
       <div class="modal-body"> 
       <div class="row"> 
        <div class="col s12" style="padding-top:25px;"> 
        <input placeholder="" id="abc" name="abc" type="text" class="validate" style="font-size:12px"> 
        <label for="abc" style="font-size:12px;">ABC</label> 
        </div> 
       </div> 
       </div> 
      </div> 
      </div> 

     </form> 
    </div> 
    </div> 
</div> 

Answer 1

です。 2番目のモーダルトリガーを最初のフォームの中に残しますが、最初のモーダルが閉じた後に2番目のモーダルを配置します。

*注：終了formタグの直前にある終了divタグがありません。

実施例：

$(document).ready(function() { 
 
    $('.modal-trigger').leanModal(); 
 
});

@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); 
 

 
.modal-form label, 
 
.modal-form input { 
 
    font-size: 12px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" /> 
 
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> 
 

 
<div id="modal1" class="modal modal-form"> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <div class="row"> 
 
     <div class="col s12"> 
 
      <button type="button" class="modal-close waves-effect waves-light btn right">&times;</button> 
 
      <h4><b>Personal Details</b></h4> 
 
     </div> 
 
     <div class="col s12"> 
 
      <h6><b>Book Details</b></h6> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <form role="form" method="post" action="thanks.php"> 
 
     <div class="row"> 
 
      <div class="col s12"> 
 
      <div class="row"> 
 
       <div class="input-field col s12 m4"> 
 
       <input id="first_name" name="firstname" type="text" class="validate"> 
 
       <label for="first_name"><b>First Name</b> 
 
       </label> 
 
       </div> 
 
       <div class="input-field col s12 m4"> 
 
       <input id="middle_name" name="middlename" type="text" class="validate"> 
 
       <label for="middle_name"><b>Middle Name</b> 
 
       </label> 
 
       </div> 
 
       <div class="input-field col s12 m4"> 
 
       <input id="last_name" name="lastname" type="text" class="validate"> 
 
       <label for="last_name"><b>Last Name</b> 
 
       </label> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col s12 m4"> 
 
       <input class="with-gap" name="gender" type="radio" id="male" value="Male" /> 
 
       <label for="male">Male</label> 
 
       </div> 
 
       <div class="col s12 m4"> 
 
       <input class="with-gap" name="gender" type="radio" id="female" value="Female" /> 
 
       <label for="female">Female</label> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="input-field col s12"> 
 
       <input id="location" name="location" type="text" class="validate"> 
 
       <label for="location">Location</label> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="input-field col s12"> 
 
       <input id="email" name="email" type="email" class="validate"> 
 
       <label for="email">Email</label> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="input-field col s12"> 
 
       <input id="mobile" name="mobile" type="number" class="validate"> 
 
       <label for="mobile">Mobile</label> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="input-field col s12"> 
 
       <textarea rows="3" id="message" name="message" class="materialize-textarea"></textarea> 
 
       <label for="message">Message</label> 
 
       </div> 
 
       <button class="btn waves-effect waves-light btn" type="reset" name="reset">Reset</button> 
 
       <button class="btn waves-effect waves-light btn" type="submit" name="action">Post 
 
       <i class="material-icons right">send</i> 
 
       </button> 
 
       <br /> 
 
       <br /> 
 
       <a class="modal-trigger waves-effect waves-light btn" href="#modal2">Second Modal</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="modal2" class="modal modal-form"> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <button type="button" class="modal-close waves-effect waves-light btn right">&times;</button> 
 
     <h6><b>Personal Details</b></h6> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <div class="row"> 
 
     <div class="col s12"> 
 
      <input id="abc" name="abc" type="text" class="validate"> 
 
      <label for="abc">ABC</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>