レールでポップアップをレンダリングできない3.1

Question

リンクがクリックされた場合にポップアップを表示したい。

私はページコントローラ内の二つの作用家と試験持っている

： -

ページ/ home.html.erbビューで、私は

<div id="myModal" class= "reveal-modal"> 
    <h1> Modal Window</h1> 
    <p> I am inside a modal</p> 
</div> 

<div> 
    <%=link_to "Modal", test_url,:class=> "buttonForModal"%> 
</div> 

とpages.jsファイルに

をすれば

$(document).ready(function() { 
    $('.buttonForModal').click(function(e) { 
      e.preventDefault(); 
     $('#myModal').reveal(); 
    }); 
}); 

これはうまく動作し、素晴らしいポップアップウィンドウを表示します。

しかし、私はページ/ test.html.erbビューと、このページで/ home.html.erb

<div> 
     <%=link_to "Modal", test_url,:class=> "buttonForModal"%> 
</div> 

でこの

<div id="myModal" class= "reveal-modal"> 
     <h1> Modal Window</h1> 
     <p> I am inside a modal</p> 
</div> 

を配置する場合、私は、任意のポップアップも何かを得ることはありません何が問題になるのでしょうか？コントローラとアクション名を明示的に記述する必要はありますか？

私は上記のコードをテストしていましたので、私はデバイスのログインをポップアップに入れることができましたが、それと同じ問題がありました。

Answer 1

モーダルポップアップを表示する方法はjavascriptで行われます。 javascriptはブラウザで実行されます。実際に表示されるjavascriptコードは、HTMLにモーダルが存在すると予想しています。

あなたがしなければならないことは、あなたが望むビューをビューの中にポップアップとしてレンダリングすることです。

だからあなたの例として、あなたのpages/show.html.erbあなたが書くべきで：

<div> 
    <%=link_to "Modal", test_url,:class=> "buttonForModal" %> 
</div> 

= render :partial => 'pages/test' 

そしてファイルpages/_test.html.erb内部を（！余分なアンダースコアに注意してください）あなたのモーダルビューを置きます。

これが役に立ちます。

Answer 2

「#myModal」...「.buttonForModal」やJavaScriptと同じページ上にある必要があります

は今それが 『#myModal』のように思える は、同じページ上ではありません」 .buttonForModal "は、jqueryがボタンをクリックしたときに" #myModal "divを見つけることを意味します...