ひっそり開発室

faceboxにフォームタグを突っ込んで
ポップ動作するHTMLを作ったのまではいいのだけど、
FirefoxとIE10では正常動作するのにIE7,8,9では動作せず。

JavaScriptやらいろいろ書き換えて対応しようかと思って
別ファイルで検証しようとしたら、そっちではうまく動作

書き換えたのって
<form method="POST" action="./"> ↓ <form method="POST" action="./test.php"> だけなので

<form method="POST" action="./index.php"> と、書き換えたらうまく動作・・・。

原因よくわからんけど動作したからいっか。

ユーザーに確認させるために
ポップアップウィンドウを表示したい！

そんな要望に応えるためにフェイスボックスを利用してみよう。
http://defunkt.io/facebox/

前提としてはjqueryが必要なので
圧縮ファイルに同梱されているlibの中のjquery.jsをコピー
/public_html/js/jquery.js

次にsrcの中のファイル4点をよくある風にコピー
/public_html/css/facebox.css
/public_html/js/facebox.js
/public_html/img/closelabel.png
/public_html/img/loading.gif

次にHTMLへの実装

header部にとりあえずこんな感じで
<link rel="stylesheet" type="text/css" href="/css/facebox.css" media="all" /> <script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="/js/facebox.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox({ loadingImage : '/img/facebox/loading.gif', closeImage : '/img/facebox/closelabel.png' }) }) </script>
bodyの中にはこんなのを書いてみましょ
<a href="#pop1" rel="facebox" class="hint">ポップアップを試す</a></h4> <div id="pop1" style="display: none;"> ポップアップしちゃいます<br /> オンラインヘルプとかも書くのに使えそうですね。<br /> </div>
実際に動かすとこんな感じ

ポップアップを試す