动态调用模态时，模态设置不起作用[物化]

Posted 2023-02-22

【中文标题】动态调用模态时，模态设置不起作用[物化]

【英文标题】：Modal settings don't work when dynamically calling modals [materialize]

【发布时间】：2018-02-06 00:40:24

【问题描述】：

我有以下代码：

 $( document).ready(function() 
 $('.modal').modal( 
     dismissible: false, // Modal can be dismissed by clicking outside of the modal
     opacity: 1, // Opacity of modal background
     inDuration: 300, // Transition in duration
     outDuration: 200, // Transition out duration
     startingTop: '4%', // Starting top style attribute
     endingTop: '10%', // Ending top style attribute
 

只要动态打开模态框，上述函数中的选项（例如：不透明度）就不会起作用，例如使用以下代码：

$('#modal1').modal('open');

仅在选择模态触发器时有效：

<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

是什么原因造成的，我该如何解决这个问题？

编辑！

为了澄清，模态是使用两种方法显示的，但是，使用

$('#modal1').modal('open');

模态不遵守不透明度或持续时间等特征。

【问题讨论】：

所以你想让 JQuery 代码显示模态？不是当你按下按钮的时候？

一个问题你知道你的代码有错误吗？你写的是 .modal 而不是 #modal

@Steven 没有错误。在尝试提供此问题的答案之前，请参阅此文档 materializecss.com/modals.html。

提示下次在您的问题中向人们明确说明您使用 Materializecss 我教它是一个引导问题

@Steven 注意它说在标签中实现。

【参考方案1】：

尝试在模态选项中执行回调函数，如下所示：

$( document).ready(function() 
  function someFunction()
    $('#modal1').modal('open');
  
  $('.modal').modal( 
    dismissible: false, // Modal can be dismissed by clicking outside of the modal
    opacity: 1, // Opacity of modal background
    inDuration: 300, // Transition in duration
    outDuration: 200, // Transition out duration
    startingTop: '4%', // Starting top style attribute
    endingTop: '10%', // Ending top style attribute
    ready: someFunction
  

编辑：这是一个有效的JSFiddle

上面的代码确实不起作用。在这个小提琴中，我只是用 IIFE 替换了 $(document).ready 函数。选项对我有用，当您只需调用没有任何触发器的模式时。

【讨论】：

这仍然不能解决我的问题您的 JSFiddle 使用了一个按钮。我的描述清楚地表明我的问题不在于使用模态触发器打开模态时，我的问题在于动态调用它时。

抱歉造成误会。据我了解，这就是你所寻求的。对 JSFiddle 进行了新的编辑。

它仍然不适合我，我不知道为什么。还在想办法。

当您打开小提琴时，模态是否以其默认选项打开？我的意思是小提琴中的一切都还好，但不能处理您的原始代码，或者即使它配置为 5000，它仍然以 inDuration:300 运行？

小提琴工作得很好。在我的代码中，它不起作用。以编程方式打开模态在默认选项中打开模型