模态自动打开并带有可关闭选项

Question

我正在尝试制作一个自动打开的模式，同时它不能关闭，直到阅读完所有 content.I 有这个，但它仍然可以通过点击外部关闭模态。我见过一些解决方案，但他们在模态触发按钮上使用了可关闭选项，但我没有使用该按钮。

<script>
 $(document).ready(function(){
    $('#modal').modal();
    $('#modal').modal('open'); 
 });
$('#modal').modal({
      dismissible: false,
      
    }
  );

</script>

Answer 1

我猜你选错了元素，这就是它没有被应用的原因。下面的代码正是你想要的方式

$(document).ready(function(){
    $('.modal').modal({
        dismissible: false,
    });
    $('.modal').modal('open');
});

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
  </div>
</body>
</html>

模态自动打开并带有可关闭选项

Modal automatically opened with dismissible option

javascript

modal-dialog

materialize