モーダルウィンドウを使いたいっす。

Rails2.1

サイトの中でウィンドウっぽいものを表示させたくなった。（Railsの検索結果を開いて、戻る時の行動が面倒な気がしていた）
　
この動作を行うときの適切なキーワードが判らなくて悩んだ。（「もやーん」と出てくるウィンドウみたいなアレ･･･ってなキーワードでしか同僚に説明出来なかった･･･orz）
　
「フローティングウィンドウ」「モーダルウィンドウ」とか言うらしい。
　
Javascriptでゴリゴリ書くサイトは直ぐに見つかるけど、Railsのエレガントな記述をしているところを探すと･･･あった。

篳篥日記 Railsでモーダルを開く(基礎編)
ここを参考にしながら作ってみる。

ダウンロード
  • LIVEPIPE Download & Contributeから「Download Latest Tarball」をクリック
  • GZファイルが落ちてきたので展開
  • srcの中「livepipe.js」と「windows.js」をコピー
  • C:\Users\kenmituo\Documents\Aptana Studio\roommgr\public\javascripts\livepipe-uiに貼り付け

　

ヘルパを作る
次に、モーダルを一つ開くたびにJavaScriptを書くのは面倒なので、ヘルパを作っておく。

参考にするきっかけになったのがこの一文。面倒なのは嫌いなんだけど、最初の苦労は厭わないって感じる。（崇拝しすぎているか？）
　
と、賞賛してからコピペさせてもらう。
Supportフォルダの中に入っているので
「module ModalHelper」を
「module Support::ModalHelper」と書き換える

　
このヘルパーは使い回しを予定している
iftbというヘルパーでインクルードする

module Support::IftbHelper
  include Support::ModalHelper
コントローラ
  def modal_open
    render :partial => 'support/iftb/andy/modal'
  end

サブフォルダに格納しているから。
　

スタイルシート

既存のファイルにコピペ！
　

スクリプトファイルの読み込み

views/layoutsを使っているので流し込む。
　
んで、試したところビューからコントローラにIDを渡せない･･･
ヘルパーを改造

module Support::ModalHelper
  def modal_link_to(label, options={}, html_options={})
    options.update({ :id=>html_options[:id]})
    html_options[:id] ||= 'modal_id'
    return link_to(label, options, html_options)
  end

　
んで、コントローラも改造

class Support::IftbController < ApplicationController
  def modal_open
    @f = Iftb.find(params[:id])
    render :partial=> "support/iftb/any/modal"
  end

　
ビューはこんな感じ

<%= modal_link_to truncate(iftb.repdetail, :length=>38), 
{:action=>:modal_open},{:id=>iftb.id} %>
<%= modal_script :id=> iftb.id %>

「うにょーん」と表示されるようになったけど、ビューの高さが固定なので見た目がよろしくない。

  def modal_script(options={})
      :height  => 450,
       height: #{opts[:height]},

高さのところを削除する。
　
　
いやいや、簡単に仕上がった。