模式不觸發按鈕點擊實現css

Question

我做了一個模態使用materrialize CSS一個，並希望從導航欄錨標記中打開它。代碼似乎正確但不能打開對話框。

這裏是代碼，

<div class="navbar-fixed"> 
     <nav> 
     <div class="nav-wrapper indigo darken-4"> 
      <a href="#" class="brand-logo"><img src="logo.png"></a> 
      <ul id="nav-mobile" class="right hide-on-med-and-down"> 
       <li><a class="modal-trigger" href="#abc">Post</a></li> 
       <li><a href="#" class=""><b>Forum</b></a></li> 
       <li><a href="#" ><b>About</b></a></li> 
      </ul> 
     </div> 
    </nav> 
</div> 


    <!-- start modal --> 
    <div id="abc" class="modal"> 

     <div class="modal-header"> 
      <button type="button" class="close" id="closemodal" data-dismiss="modal" id="closemodal">&times;</button> 
      <div class="row"> 
      <div class="col s6" style="padding-top:25px;"> 
      <h4 >Personal Details</h4> 
      </div> 
      <div class="col s6"> 
      <h4>Book Details</h4> 
      </div> 
      </div> 
     </div> 
     <div class="modal-body"> 
      <form> 
      <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="gender" style="font-size:12px;">Male</label> 

      </div> 
      <div class="input-field col s2"> 
       <input name="gender" type="radio" id="female" value="Female"> 
       <label for="gender" 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 
        <i class="material-icons right">shuffle</i> 
       </button> 
       <button class="btn waves-effect waves-light" type="submit" name="submit" style="float:right;">post 
        <i class="material-icons right">send</i> 
       </button> 
       </div> 


     </div> 

      <!-- book details --> 
      <div class="col s6"> 

      <table id="booktable"> 
        <tr class="clone"> 
        <div class="row"> 
          <td> 
          <div class="input-field col s3"> 
           <input placeholder="" id="booktitle" name="booktitle" type="text" class="validate" style="font-size:12px"> 
           <label for="book_title" style="font-size:12px;">BookTitle</label> 
          </div> 
          </td> 
          <td> 
          <div class="input-field col s3"> 
           <input placeholder="" id="bookgenre" name="bookgenre" type="text" class="validate" style="font-size:12px"> 
           <label for="book_genre" style="font-size:12px;">BookGenre</label> 
          </div> 
          </td> 
          <td> 
          <div class="input-field col s3"> 
           <input placeholder="" id="bookwriter" name="bookwriter" type="text" class="validate" style="font-size:12px"> 
           <label for="book_writer" style="font-size:12px;">BookWriter</label> 
          </div> 
          </td> 
          <td> 
          <div class="input-field col s3"> 
           <input placeholder="" id="bookdescription" name="bookdescription" type="text" class="validate" style="font-size:12px"> 
           <label for="book_description" style="font-size:12px;">Description</label> 
          </div> 
          </td> 
        </div> 
       </tr> 
      </table> 
      <p><a href="#" class="add" rel=".clone" id="addmore">Add More</a></p> 

      </div> 
      <!-------- end books ---> 
      </div> 
     </form> 
     </div> 

     </div> 

請不要回復。提前致謝！

Answer 1

模態需要使用這個腳本

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