当一个窗口准备好时，我如何打开一个物化模态

How I can open a materialize modal when a window is ready?

本文关键字：一个 何打开 模态 准备好 窗口      更新时间：2023-09-26

我想打开一个模态窗口，当用户在一个窗口，我的意思是，打开一个模态没有触发按钮，我有这个例子。

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

这会自动按下按钮，使modal自动打开，但是我不想这样做

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

纯JavaScript解决方案

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

你可以这样做:

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

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

$(".MyModal").openModal()

to open modal and:

$(".MyModal").closeModal()

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

这可以在instance.open()中完成。

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

如果您仍然有其他解决方案的问题，我必须在第二个文档中嵌套jQuery('#modal_id').modal('open')语句。准备好语句，如下所示:

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

我不知道为什么它可以工作，我知道它只是很丑，但它工作得很…

试试这个对我有用

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

您需要确定触发要显示的模态的事件是有意义的。onload或onmouseover可以代替onclick。

首先，你必须初始化模态:

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

然后在按钮动作的帮助下你执行这个模式被打开

相关文章：