Question

我想在用户点击它时关闭模态，但是，我的代码无效。这是我与Materialize的第一个项目，所以我不知道为什么它不起作用。以下是我所做的简单代码：

内部标签：

      <!--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();
    });
});

不允许的选项不适用于物化css

2 个答案: