<div class = "main content-index"> <div class = "container"> <% @contents.each do |content| %> <div class="posts-index-item"> <%= content.name %><br> <img src="<%= "/images/#{content.image}" %>"><br> <%= content.period %> free try<br> <%= content.detail %><br> <div class= "btn message try-show">TRY!!</div> <% end %> </div> </div> </div> <!-- Modal --> <div class="modal-wrapper" id="email-modal"> <div id="modal-content"> メールアドレス </div> </div> <!-- ここまで -->
に関して、下記のjQueyが反映されません。
$(function() { $('.try-show').click(function() { $('#email-modal').fadeIn(); }); });
ご教示お願い致します。
CSSの追記をしました。
#modal-content { position: absolute; top: 20%; left: 34%; background-color: #e6ecf0; padding: 20px 0 40px; border-radius: 10px; width: 450px; height: auto; text-align: center; } .modal-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 100; display: none; }