如何从部分轨道显示具体化模态?

Question

Rails 新手，我对如何显示放置在部分中的物化模态感到困惑。 我正在表格中创建Pokedex，并且正在为其创建'pokemon party'功能。我已经能够从主屏幕表添加到派对并从派对页面中删除口袋妖怪，但我想添加一个确认模式来删除。

在过去的几个小时里，我一直在看例子，但是由于它们要么使用Bootstrap，要么使用jQuery，要么在Materialize中使用'leanModal'，我很困惑，而且Materialize文档不使用leanModal和jQuery。我只想使用Materialize，vanilla JS和Ruby当然哈。

我希望能够按下link_to，打开模态，然后在"同意"上运行remove_from_party

所以，这是我的

派对.html.erb

<% @party.each do |pok| %>
<tr>
<td> <%= image_tag pok['image']%></td>
<td> <%= pok['id'] %>  </td>
<td> <%= pok['name'].capitalize %> </td>
<td> <%= link_to 'FIND OUT MORE', pokemons_show_path(pok['name']), :class => 'find-out-more' %> </td>
<td> <%= link_to 'REMOVE FROM PARTY', pokemons_party_remove_modal_path(pok['name']),  {:remote => true, 'data-toggle' => "modal", 'data-target' => '#party_remove_modal', class: 'waves-effect waves-green btn'}  %>
</td>
<td> <%#= link_to 'REMOVE FROM PARTY', pokemons_party_remove_path(pok['name']), :class => 'remove-from-party', method: 'delete' %> </td>
</tr>
<% end %>

这是我的路线

get '/pokemons/remove/:name', to: "pokemons#show_party_remove_modal", as:"pokemons_party_remove_modal"

这是我用于显示模态的控制器方法

def show_party_remove_modal  
respond_to do |format|
format.js { render :partial => '../javascript/party/remove.js.erb' }
end
@pokemon_name = params[:name]
end

这是我的应用程序中.js

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, options);
});

这是我对模态的部分

<!-- Modal Structure -->
<div id="party_remove_modal" class="modal">
<div class="modal-content">
<h4>Remove from Party</h4>
<p>Are you sure you would like to remove <% @pokemon_name.capitalize %> from your party?/p>
</div>
<div class="modal-footer">
<%= link_to 'AGREE', pokemons_party_remove_path(@pokemon_name), :class => 'modal-close waves-effect waves-green btn', method: 'delete' %>
</div>
</div>

我的删除.js.erb 部分

var instance = M.Modal.getInstance('party_remove_modal');
instance.open();

老实说，很困惑，因为有很多解决方案，但似乎没有一个与新文档相匹配。我什至无法让模态出现。欢迎所有提示/建设性批评。如果您需要更多信息，请告诉我。

Answer 1

这不是你的错误，而是Materialize的错误。取出未声明的选项变量：

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});

带选项：

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems,{
dismissable: true
});
});

我不能代表你的其余代码 - 但我确信选项变量会破坏你的 JS。

此外，您尝试打开模态的方式不太正确。getInstance接受元素，而不是选择器：

var elem = document.querySelector('#myModal');
var instance = M.Modal.getInstance(elem);
instance.open();

你甚至不需要getInstance- 如果你只有 1 个模态，或者你知道要打开哪个模态，你可以从你在 init 中设置的elems变量中通过索引获取它：

instances[0].open();