How to put modals in partials?

Question

I can't get how to put modals in partials. Help me, please !

I have button:

 <a class="btn btn-large" data-toggle="modal" href="#show_me_modal"
 onclick="printpage()">Name of button<sup>TM</sup> message in action</a>

and div modal:

    <div class="modal hide fade" id="show_me_modal">
     <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
         </div>
      <div class="modal-body">
      <p>some text</p>

      <ul class="media-grid">
        <%= image_tag("/images/pic02.png") %>
      </ul>

    </div>

    <div class="modal-footer">
      <b><%= link_to "#", '#' %></b>          
    </div>
  </div>

thesis · Accepted Answer · 2012-05-29T14:45:09.703

I have created ModalHelper for one project. It helps dynamically create modals and links to them. Hope it helps you:

Helper code:

Create file app/helpers/modal_helper.rb

module ModalHelper
    def modal(css_id, header_text, hidden = true, &block)
        content_tag(:div, :class => 'modal', :id => css_id, :style => ("display:none;" if hidden) ) do
            concat modal_header(header_text)
            concat modal_body(&block)
        end
    end

    def modal_button(link_text, href)
        modal_caller link_text, href, :button
    end

    def modal_link(link_text, href)
        modal_caller link_text, href
    end

    private

    def modal_caller(link_text, href, type = nil)
        options = { :"data-toggle" => "modal" }
        options.merge!({ :class => "btn" }) if type == :button
        link_to link_text, "#" + href, options
    end

    def modal_header(header_text)
        content_tag(:div, :class => 'modal-header') do
            concat content_tag(:button, 'x', :class => 'close', :"data-dismiss" => 'modal')
            concat content_tag(:h3, header_text)
        end
    end

    def modal_body
        content_tag(:div, :class => 'modal-body') do
            yield
        end     
    end 
end

Link to modal:

Generates link to your modal.

<%= modal_link('Sign up', "myModal") %>

Rendering to modal:

Contains code you want to render.

<%= modal('myModal', 'Registration') do %>
    <% render 'devise/registrations/register' %>
<% end %>

thank you for help, but what means modal_link? i should write linke this <%= link_to "Sign Up", "myModal"%> or what? When i put your code (rendering to modal) undefined method `modal' And I should just put my modal div into regitration form yes? — Denys Medynskyi, May 29 '12 at 14:34
`modal_link` generates the link to your model (it has link_to in sources). Check `modal_caller` method to understand what I'm talking about. Method `modal` is Helper method and it should be accessible in your views, in Rails 3 Helpers are included automatically and are accessible in all views. — thesis, May 29 '12 at 14:39
Have you read my code?? `modal_caller` is there. Have you created modal_helper.rb? — thesis, May 29 '12 at 14:54
Hello again! Now, I can't understand your code, but I hope It won't be needed a lot. When I'm using your code, it shows me modal only with header Registration, but I create partial in devise/registration. Can you tell me why? — Denys Medynskyi, May 30 '12 at 12:18

How to put modals in partials?

1 Answers1