как сделать ссылку на бутстрап модальную через изображение с ruby ​​на рельсах - PullRequest
Новая
       50

как сделать ссылку на бутстрап модальную через изображение с ruby ​​на рельсах

0 голосов
/ 11 декабря 2018

Я пытаюсь создать ссылку на мод загрузки с помощью щелчка по изображению.

Я пытаюсь адаптировать демо-код демо-кода к тегам ruby. 

    <%= link_to 'data-toggle' => 'modal', 'data-target' => '#exampleModalLong' do %>
      <%= image_tag("https://i.imgur.com/qtVofCH.jpg", :class => "portfolio-image") %>
        <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
          <div class="modal-dialog" role="document">
             ... 
          </div>
        </div>
    <% end %>

Но это не работает.Это заставляет его перейти в начало страницы, добавив к URL-адресу

? Data-target =% 23exampleModalLong & data-toggle = modal

.

Edit1: теперь я нацеливаюсь на модал просто с помощью "#exampleModalLong": 

      <%= link_to '#exampleModalLong', 'data-toggle' => 'modal' do %>
        <%= image_tag("https://i.imgur.com/qtVofCH.jpg", :class => "portfolio-image") %>
      <% end %>
      <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        ...
      </div>

Но он все равно не будет работать должным образом.По крайней мере, это не возвращает меня к началу страницы.И добавляет

/ # exampleModalLong

к URL.Я не знаю, почему он не вызывает модальный div, когда я нацеливаю его на id.

1 Ответ

0 голосов
/ 11 декабря 2018

Это решение сработало для меня Модальный загрузчик, изображение вместо кнопки .Ты это пробовал?Будьте осторожны, чтобы изменить идентификатор модального ключа, чтобы он совпадал в атрибуте data-target вашего тега <a> и в id из <div> для вашего модального окна. 

<!-- Button -->
<a data-toggle="modal" data-target="#exampleModalLong">
  <%= image_tag("https://i.imgur.com/qtVofCH.jpg") %>
</a>


<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
...