Javascript 当窗口准备就绪时，如何打开物化模式？

我想在用户处于窗口中时打开一个模式窗口，我的意思是，在没有触发按钮的情况下打开一个模式窗口，我有这个例子

<button data-target="modal1" class="btn modal-trigger" id="btn-1">Modal</button>
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
  <h4>Modal Header</h4>
  <p>A bunch of text</p>
</div>
<div class="modal-footer">
  <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
</div>

---

这会自动按下按钮，使模态自动打开，但我不想这样做。

您需要确定触发模态显示的事件

onload

或

onmouseover

可能适合您，而不是

onclick

您可以这样做：

    $(document).ready(function(){
       $('.modal1').modal('open');
    });

---

我在materialize.js中找到了解决方案 我们必须利用：

$(".MyModal").openModal()

要打开modals和：

$(".MyModal").closeModal()

关闭它。

---

Materialize团队忘记刷新他们的文档。

对于Materialize v0.98.2

创建一个模态

<div id="modal" 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-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

模态头
一串文字

文档准备加载时打开模式

<script>
 $(document).ready(function(){
    $('#modal').modal();
    $('#modal').modal('open'); 
 });
</script>

$（文档）.ready（函数（）{
$（“#modal”）.modal（）；
$（'#model'）。model（'open'）；
});

如果您在给出其他解决方案时仍然遇到问题，我必须将jQuery（'modal_id'）。modal（'open'）语句嵌套在第二个文档中。ready语句如下：

jQuery(document).ready(function(){
      jQuery('#modal_id').modal();
      jQuery(document).ready(function(){
          jQuery('#modal_id').modal('open');
      });
});

---

我不知道为什么会这样，我知道这很难看，但它的效果很好。

这可以通过

instance.open（）

来完成

document.addEventListener（'DOMContentLoaded'，函数（）{
var Modalelem=document.querySelector（'.modal'）；
var实例=M.Modal.init（Modalelem）；
open（）；
});

纯JavaScript解决方案

const elem = document.getElementById('modal id here');
const instance = M.Modal.init(elem, {dismissible: false});
instance.open();

---

试试看，这对我有用

<script>
$(document).ready(function(){
$('#modal1').modal('open');
});
</script>

$（文档）.ready（函数（）{
$（'#modal1'）.modal（'open'）；
});

首先，必须初始化模式：

$(document).ready(function () {
    $('#modal-bill-order').modal();
    $('#btn-bill').on('click', function () {
        $('#modal-bill-order').modal('open');
    });
});

---

然后，在按钮的帮助下，您执行打开此模式的操作

您还可以在每个事件上使用$（'yourModal'）.modal（'open'）函数top open'yourModal'。我已经尝试过了，但收到一个错误：$（…）.modal（）不是函数：（我必须使用$（…）.leanModal（）我知道这是materialize js组件的问题。您需要单独初始化组件。@BilalAhmad您能详细说明一下吗？

<script>
$(document).ready(function(){
$('#modal1').modal('open');
});
</script>

$(document).ready(function () {
    $('#modal-bill-order').modal();
    $('#btn-bill').on('click', function () {
        $('#modal-bill-order').modal('open');
    });
});