不允許的選項不工作在物化css

Question

我想關閉模式，當用戶點擊它之外，但是，我的代碼不起作用。這是我的第一個項目Materialize，所以我不知道爲什麼它不工作。這裏是什麼，我做了一個簡單的代碼：

內head標籤：

 <!--Import Google Icon Font--> 
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <!--Import materialize.css--> 
     <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> 
     <!--Let browser know website is optimized for mobile--> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
     <!--Import jQuery before materialize.js--> 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script> 

體內標籤：

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

     <!-- Modal Structure --> 
     <div id="modal1" class="modal"> 
     <div class="modal-content"> 
      <h4>Modal Header</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
     </div> 
     <div class="modal-footer"> 
      <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Disagree</a> 
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a> 
     </div> 
     </div> 

裏面的腳本標籤：

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

Answer 1

嘗試使用$（document）.click（）。例如：

$(document).ready(function() { 
    $(document).click(function (e) { 
     $("#modal1").hide(); 
    }); 
}); 

Answer 2

更正：

$(document).ready(function() { 
    $(document).click(function (e) { 
if($("#modal1").is(":visible")) 
     $("#modal1").hide(); 
    }); 
});