modals

Example

<a <%= modal_trigger("#my_modal_content") %> >privacy policy</a>
<div id="my_modal_content" style="display: none;">
  Our Privacy Policy...
</div>

In this example, clicking on the 'privacy policy' link will open the hooch modal with the content of the div with the id 'my_modal_content'.

Instant Modal

<div <%= modal_now('#my_modal_content') ></div>
<div id="my_modal_content">
  This is an important message you must read before continuing.
</div>

This will open a modal as soon as this html is loaded into the browser, using the content from the element provided in the helper with a css selector.

Ajax Modal

In your view

<%= ajax_link('privacy policy', privacy_policy_url, {}, '' %>

In your controller

def show
  render json: {hooch_modal: true, html: render_to_string(partial: 'privacy')}
end

This requires Thin Man. In this example, clicking on the 'privacy policy' link will send an ajax request to the privacy_policy endpoint. A hooch modal will open containing the response html. This assumes you have a 'privacy' partial view with the necessary content.

Configuration

Somewhere in the body of your page, you need to add the following HTML:

<div id="hooch-mask" style="display: none;">
  <div id="hooch-modal">
    <div id="hooch-dismiss">×</div>
  </div>
</div>

This is the modal structure that hooch will use when you call on the modal behavior.

Feel free to control the CSS of these elements from your css file.

CSS you need to set

You need to set the background-color property on the #hooch-modal element to suit your design.

CSS you need to leave alone

Keep in mind that the following styles are needed by hooch and should be left alone, as they will be overridden.

hooch-mask

• height
• top, left, right, bottom
• position

hooch-dismiss

• cursor