不允许的选项不工作在物化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(); 
    }); 
});