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 66,029+ 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.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.