Не в состоянии сделать всплывающее окно в рельсах 3.1

Question

Я хочу отобразить всплывающее окно, если ссылка нажата.

У меня есть два действия home и тестирование контроллера внутренних страниц: -

В представлении pages / 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();
     });
});

Это прекрасно работает, давая мне хорошее всплывающее окно.

Однако, если я помещу это

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

в представлении pages / test.html.erb и это в pages / home.html.erb

<div>
      <%=link_to "Modal", test_url,:class=> "buttonForModal"%>
</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 при нажатии кнопки ...