logo标签列表

当窗口准备好时，我该如何打开一个Materialize模态框？

javascriptjqueryhtmlmaterialize
4

当用户在某个窗口中时，我希望打开一个模态窗口，也就是说，不需要触发按钮就能打开一个模态窗口，我有这个例子。

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

这会自动点击按钮并使模态框自动打开，但我不想这样做。

9个回答
16

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

纯JavaScript解决方案。

const elem = document.getElementById('modal id here');
const instance = M.Modal.init(elem, {dismissible: false});
instance.open();
6
你可以这样做：
    $(document).ready(function(){
       $('.modal1').modal('open');
    });
你也可以在每个事件上使用$('yourModal').modal('open')函数来打开'yourModal'。 - Léo Fasano
1
我尝试过那个，但是我收到了一个错误： $(...).modal()不是一个函数 :( 我不得不使用$(...).leanModal() - Martin Rafael Pérez Lara
5
我在materialize.js中找到了解决方案。 我们必须使用：
$(".MyModal").openModal()

打开模态框并且：

$(".MyModal").closeModal()

关闭它。

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

5
这可以通过instance.open()实现。
<script>
        document.addEventListener('DOMContentLoaded', function () {
            var Modalelem = document.querySelector('.modal');
            var instance = M.Modal.init(Modalelem);
            instance.open();
        });

</script>
2
如果按照其他解决方案仍然存在问题，我需要在第二个document.ready语句中嵌套jQuery('#modal_id').modal('open')语句，像这样：
jQuery(document).ready(function(){
      jQuery('#modal_id').modal();
      jQuery(document).ready(function(){
          jQuery('#modal_id').modal('open');
      });
});

我不知道这为什么有效，而且我知道它很丑陋，但它确实有效，所以...

1
我看到这是使用 Materialize JS 组件的问题。您需要单独初始化这些组件。 - Bilal Ahmad
@BilalAhmad，你能详细说明一下吗？ - Joseph Cardwell
1

尝试这个对我来说是有效的

<script>
$(document).ready(function(){
$('#modal1').modal('open');
});
</script>
0
你需要确定触发模态框显示的事件。与其使用onclick，也许onload或onmouseover更适合你的需求。
0

首先，您必须初始化模态框：

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

然后通过按钮的操作，执行打开这个模态框

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接