Question

我试图弹出一个模态表单来添加新评论。

HTML代码段

<a href="#add_ac" data-toggle="modal" class="waves-effect waves-light blue accent-2 white-text btn">Add Comment</a>

<div id="add_ac" class="modal">
  <div class="modal_content">
    <%= render '/s_comments/form' %>
  </div>
</div>

我试图使用该链接来触发模态

这是模型的javascript文件（admin.js）

  $('.modal-trigger').leanModal({
    dismissible: true
  });

根据应该有效的materialize css文档。

以下是我的application.js文件的标题

//= require jquery2
//= require jquery_ujs
//= require turbolinks
//= require materialize-sprockets
//= require_tree .

谢谢。

Answer 1

您需要在文档就绪函数中初始化实现模式：

  $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });

在此之后他们应该出现。

你还需要让你的轨道形式为模态做好准备，我在这里找到了一个指南：http://www.jetthoughts.com/blog/tech/2014/08/27/5-steps-to-add-remote-modals-to-your-rails-app.html

Answer 2

我知道这个问题真的很老了，但我想分享以防万一其他人遇到这个问题。

如果您正在使用TurboLinks（这是Rails中的标准），那么将监听器附加到按钮的javascript需要进入正文而不是文档的头部。 TurboLinks仅替换正文，因此当您加载新页面时，javascript不会再次运行。

Answer 3

您正在初始化“模态触发器”的模态类，

  $('.modal-trigger').leanModal({
dismissible: true

}）;

但您没有在锚标记中调用/引用该类

<a href="#add_ac" data-toggle="modal" class="waves-effect waves-light blue accent-2 white-text btn">Add Comment</a>

因此您只需在锚标记中添加“modal-trigger”

<a href="#add_ac" data-toggle="modal" class=" modal-trigger waves-effect waves-light blue accent-2 white-text btn">Add Comment</a>

它应该可以工作，我也不知道你为什么要使用数据切换。

MaterialiseCSS模式不在rails中工作

3 个答案: