How do I show a modal popup from a link_to button
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">×</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');
});
}
});