Ask A Question

Notifications

You’re not receiving notifications from this thread.

How do I show a modal popup from a link_to button

Samantha O asked in Rails

Hi,
I am trying to build a modal popup when pushing a link_to button. How do I accomplish this? The modal doesn't popup yet, but is underneath my link_to button.

<div class="button-container">
    <% if signed_in? && role == 1 %>
 <%= link_to "Add a listing", new_store_path, class: "submitinputfield input " %>
            <% else %>
              <%= link_to "Get started", root_path, { :remote => true, data: { target: "#id01", toggle: "modal" } } %>
              <div class="host-login-container">
                <h2>CSS Animated Modal</h2>
                  <p>Some text some text</p>
                  <button onclick="document.getElementById('id01').style.display='block'" class="add-listing-btn">Open animated modal</button>

                <div id="id01" class="modal hidden">
                  <div class="modal-content animate-top modal-card">
                    <header class="host-login-container teal">
                      <span onclick="document.getElementById('id01').style.display='none'" class="add-listing-btn display-top-right">&times;</span>
                      <h2>Modal header</h2>
                    </header>
                    <div class="host-login-container">
                      <p>Some text some text</p>
                      <p>Some text</p>
                    </div>
                    <footer class="host-login-container teal">
                      <p>Modal footer</p>
                    </footer>
                  </div>
                </div>
              </div>
            <% end %>
          </div>

Reply

I got this working with javascript.

<%= link_to "Get started", { id: "store-sign-up" } %>

document.addEventListener("DOMContentLoaded", () => {
var modal = document.querySelector('.modal')
var el =  document.getElementById("store-sign-up")

if(el) {
    document.getElementById("store-sign-up").addEventListener('click', () => {
        modal.classList.remove('modal--hidden');
      });

      document.querySelector(".close-modal").addEventListener('click', () => {
        modal.classList.add('modal--hidden');
      });
}
  });
Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 85,291+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.