All threads / How do I show a modal popup from a link_to button

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>

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');
      });
}
  });
Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.