google先生に「lightbox系」でお伺いを立ててみれば、色々な方が画像ポップアップのスクリプトをまとめて下さっているのがよく分かります。
WEBにちょっとした彩を与えてくれるlightbox。
画像のポップアップだけじゃなくてformもポップアップで出したいよね！
本家lightboxはもちろん、lytebox、lightwindow、SimpleModalなどのlightbox系ライブラリでformのポップアップ表示が可能なようです。
実現方法は色々あるのですが、うぁ！すっげー！！みたいなエフェクトは要らないし、ライブラリのAPI調べるのも面倒だなー、ってな時にお勧めのformのポップアップスクリプトを見付けましたのでご紹介。
Form in a Lightbox
ここに書かれている通りなのですが、少し補足。
このライブラリはHTMLの中の<div id="box">なエレメントをポップアップっぽく表示しているだけです。
ですので、formの入力値を親ウインドウに渡したい時に親ウインドウのハンドルを取ってきたりする必要はなく、そのままdocument.getElementByIdなんかで親ウインドウやポップアップウインドウの要素も取得できます。
デモソースが格納されているアーカイブがありますので、ダウンロードして試してみます。
http://www.xul.fr/javascript/lightbox-form.zip
展開してブラウザで表示してみれば、クライアントだけで完結していることが分かります。
少し手を入れて、ポップアップformの属性を親ウインドウで取得してみます。
ダウンロードした
lightbox-form/lightbox-form-demo.html
を編集します。
親ウインドウの<div id="hoge">hoge</div>要素にポップアップウインドウで選択した都市名を表示させてみます。
<script type="text/javascript">
function hookSelect() {
var select = document.getElementById("select_city");
var text = select.options[select.selectedIndex].text;
var div = document.getElementById("hoge");
div.innerHTML = text;
}
</script>
こんな感じのスクリプトをonchangeで引っ掛けます。
<select name="select" id="select_city" onchange="hookSelect();">
最終的なHTMLは以下。
<html>
<head>
<title>Form in a Lightbox, the Demonstration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" href="lightbox-form.css">
<script src="lightbox-form.js" type="text/javascript"></script>
<script type="text/javascript">
function hookSelect() {
var select = document.getElementById("select_city");
var text = select.options[select.selectedIndex].text;
var div = document.getElementById("hoge");
div.innerHTML = text;
}
</script>
</head>
<body>
<div id="hoge">hoge</div>
<h1>Form in a Lightbox, the Demonstration</h1>
<p>Demo of the use of a lightbox to show a form to fill.</p>
<br>
<div id="filter"></div>
<div id="box">
<span id="boxtitle"></span>
<form method="GET" action="lightbox-formulaire-test.html" target="_parent">
<p>Email adress:
<input type="text" name="email" value="myself@somedomainname.com" maxlength="60" size="60">
</p>
<p>Male
<input type="radio" name="genre" value="man" checked>
Female
<input type="radio" name="genre" value="woman">
</p>
<p> City of current residence
<select name="select" id="select_city" onchange="hookSelect();">
<option selected>New York</option>
<option>Chicago</option>
<option>Miami</option>
<option>Los Angeles</option>
<option>Dallas</option>
</select>
</p>
<p>
<input type="submit" name="submit">
<input type="button" name="cancel" value="Cancel" onclick="closebox()">
</p>
</form>
</div>
<p> To make the form appearing, <a href="#" onclick="openbox('Title of the Form', 1)">click
here</a>. <br>
In this example, a fading effect is applied, this may be disabled, to do so,
click on the <a href="#" onclick="openbox('Title of the Form', 0)">form with
no fading effect</a>.</p>
<br>
<hr>
<p>(c) 2008 <a href="http://www.xul.fr/xul.html" target="_parent">xul.fr</a></p>
</body>
</html>
これで選択した都市名が親ウインドウにも反映されるようになります。
ウインドウハンドルとか何にも要らないし、楽チン～～。
すごい便利ですね。それにカンタン！
返信削除