物化模态不工作，保持开放答案

【问题标题】：Materialize Modal not working, staying open物化模态不工作，保持开放
【发布时间】：2020-08-25 02:35:02
【问题描述】：

我正在尝试在我的 laravel 应用程序中使用物化模式，我有一个名为骨架的刀片文件，我将所有“脚本”和样式表等放入其中。这产生了我在单个刀片中定义的部分文件。这很好用，但是我最近遇到了很多关于实现的问题。

当我尝试使用模式时，我使用文档中的这段代码：

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

它位于我的骨架文件的底部，并显示在每个文件的底部。我已经尝试将它放入我的文件本身，但它不起作用。

我的 HTML 如下所示：

 @if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"
                href="#modal1"> Create</a>
            @endif

刀片文件底部：

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

我的模式出现在屏幕上，但它会自动“显示”，当我单击打开按钮时它什么也不做。我只是使用演示模式，我会在可以使用时对其进行自定义，谢谢。

【问题讨论】：

标签： html css laravel materialize

【解决方案1】：

给你一个解决方案

要打开一个模态，请使用下面的代码

$('.modal').modal('show');

要关闭模式，请使用以下代码

$('.modal').modal('hide');

自动打开是因为

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

只要文件准备好，它就会打开模式。

点击后

@if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger" href="#modal1"> Create</a>
@endif

使用$('.modal').modal('show');打开模态

【讨论】：

我已经编写了这段代码，但它不起作用。 $(".modal-trigger").click(function() { $('.modal').modal('show'); })
@flugscoding 您在浏览器控制台中遇到任何错误吗？你能检查一下点击方法是否被触发了吗？
此代码不正确。在物化中没有显示和隐藏。它是打开和关闭的。

【解决方案2】：

好的，首先，为什么模态触发器上有两个href？

 @if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"
                href="#modal1"> Create</a>
            @endif

取下一个，然后我们从那里取下它。

上面的答案错误地指出下面的init打开了模态：

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

这只是初始化，它插入 JS 以使其工作。

<!-- this is the initialisation -->
$('.modal').modal();
<!-- this is instruction to open -->
$('.modal').modal('open');

检查笔here 中的两个命令，将每个命令注释掉，看看会发生什么。

模态框默认关闭，通过点击.modal-trigger或使用上面的打开命令触发..

【讨论】：

【解决方案3】：

我太傻了，我因为某种原因链接了引导 js，但它们相互冲突。很抱歉浪费大家的时间。

【讨论】：