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

For 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

你可以这样做：

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

Answer 3

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

{
  "repositories": [
    {
      "type": "composer",
      "url": "https://composer.typo3.org"
    }
  ],
  "require": {
      "typo3/cms": "^6.2",
      "typo3-ter/smarty": "2.1.2"
  }
}

打开模态并：

$(".MyModal").openModal()

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

Answer 4

这可以通过public class MySerializable implements Serializable { private static final long serialVersionUID = 5697687207743287388L; private transient TransientObject transientObject; public MySerializable(TransientObject transientObject) { this.transientObject = transientObject; } public TransientObject getTransientObject() { return transientObject; } private void writeObject(java.io.ObjectOutputStream out) throws IOException { out.writeUTF(transientObject.getId()); } private void readObject(java.io.ObjectInputStream in) throws IOException, ClassNotFoundException { this.transientObject = retrieveTransientObject(in.readUTF()); } private static TransientObject retrieveTransientObject(String id) { // ... } }完成。

instance.open()

Answer 5

纯JavaScript解决方案。

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

Answer 6

如果您在给出其他解决方案时仍遇到问题，我必须在第二个文档中嵌套jQuery（＆＃39;＃modal_id＆＃39;）。modal（＆＃39; open＆＃39;）语句。准备好的声明如下：

Margin

我不知道为什么这样有效，而且我知道它很简单，但它确实有效......

Answer 7

试试这对我有用

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

Answer 8

您需要确定哪个事件有意义来触发要显示的模态。 onload或onmouseover可能适合您而不是onclick。

Answer 9

首先，您必须初始化模式：

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

然后在按钮的作用下，执行该模式被打开

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

9 个答案: