如何在窗口准备好后打开实体模式？

Question

我想在用户进入窗口时打开一个模态窗口,我的意思是,打开没有触发按钮的模态,我有这个例子.

<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>

如果我点击触发按钮,它可以工作,但我不想点击.窗口准备好后我使用此代码:

$(function()
{
    function checkCode()
    {
        $("#btn-1").click();
    }
});

这会自动按下按钮并产生模态自动打开的效果,但我不想这样做.

Answer 1

对于Materialise 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>

Answer 2

纯 JavaScript 解决方案。

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

Answer 3

你可以这样做：

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

Answer 4

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

$(".MyModal").openModal()

打开模式并且：

$(".MyModal").closeModal()

关闭它。Materialise 团队忘记刷新他们的文档。

Answer 5

这可以通过instance.open().

<script>
        document.addEventListener('DOMContentLoaded', function () {
            var Modalelem = document.querySelector('.modal');
            var instance = M.Modal.init(Modalelem);
            instance.open();
        });

</script>