背景を暗くするモーダルウィンドウで表示したい！（Control.Modalの使い方）その2 - ザリガニが見ていた...。
前回までに、モーダルウィンドウが表示できるようになった。今回は調子に乗って、ユーザー環境設定ページに加え、パスワード変更、ユーザ情報編集*1ページもモーダルウィンドウ化することにした。（管理者以外の一般ユーザーが操作するサブページは全てモーダルウィンドウ化することにした。）前回まで設定が終わっているiframe: trueのモーダルウィンドウなら、その作業はとっても簡単だ！ モーダルウィンドウの追加 モーダルウィンドウで表示したいページへのリンクに、:class=>"modal"を追記する。 キャンセルリンクをモーダルウィンドウを閉じるJavaScriptに変更する。 submitボタンを押した後のページ遷移を同じページの再表示に変更する。 以下、パスワード変更ページのモーダルウィンドウ化の作業例 app/views/layouts/_menu2.rhtml 1 :class=>"moda
背景を暗くするモーダルウィンドウで表示したい！（Control.Modalの使い方）その1 - ザリガニが見ていた...。
初めて見た時からすごく憧れていたのだ。最近は、いろんなページでよく見かける。写真をクリックすると、そのページの明度が下がって、拡大された写真が表示されたウィンドウが浮かび上がる、アレ（Lightbox）です。MacBookでF12を押すとDashboardが起動するが、その時ウィンドウが表示されるイメージだ。周囲の背景に惑わされず、必要な情報が自然と目に入って来る。すごくシンプルなんだけど、洗練されたデザインだ。 最近では、LightBoxと似たような効果を演出してくれるライブラリがたくさん公開されているらしく、CSVサーバーにもぜひ導入してみたい！（Lightbox.js のような写真のスライドショーするライブラリ沢山）きっと、ユーザー環境を設定するページで利用するのが良さそう。というより、絶対、モーダルウィンドウで表示したい！ということで、試行錯誤の導入の始まり...。 調査 今回必要
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
