March 21

1 comments

Rails – Pop up window with no header, footer or navigation

By Christopher Mendla

March 21, 2016


Last Updated on November 30, 2019 by Christopher G Mendla

I needed to have a window pop up in a Rails Project  without having the header, footer and navigation.

The popup was easy. I created a file called quick_help.html.erb in viewsabout_and_help

I needed to add the following to my routes.rb

get ‘about/quick_help’ => ‘help#quick_help’


In my index.html.erb, I added a button linking to the quick help page:

<%= link_to( .html_safe,
“/about/quick_help”,
‘data-popup’ => true,
:class => “button_class”,
:onclick=>“window.open(this.href,’quick_help’, ‘height=800, width=500’);
return false;”
) %>
            “/about/quick_help”,

            ‘data-popup’ => true,

            :class => “button_class”,

            :onclick=>“window.open(this.href,’quick_help’, ‘height=800, width=500’);
return false;”
                                        return false;”   ) %><br>

However, the window was displayed with the header, footer and nav bars. None of these were needed.

The solution was to create a layout called alternate.html.erb with one line <% yield %> in the view/layouts folder

Then, in the help controller, I added a def of

def quick_help
render
 render :layout => ‘alternate’
end
end


To make things nice and friendly, I added a close button on the help screen as follows:

<%= link_to( .html_safe, ‘#’, :onclick=> ‘window.close();’) %>

The result is a nice pop up window. Currently it appears in the top left of the screen.

Christopher Mendla

About the author

Leave a Reply

Your email address will not be published. Required fields are marked

  1. Hey chris,

    I saw you post which was helpful for me
    can you help me out on create a new popup window in rails which should help the user to add new book.

    Header of the popup should be Add Book
    Name of the Book
    Upload picture of book
    description
    author
    edition
    pulication
    year of publish
    upload index of book
    cancel and save button

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}