olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法

  1. Home>
  2. コンテンツ表示>
  3. フローティングボックス>
  4. とても使いやすいフローティングウィンドウ

フローティングボックスjquery-1.2.6.min.js

とても使いやすいフローティングウィンドウ

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-script-type" content="text/javascript" />
	<title>[DEMO] フローティングポップアップウィンドウ</title>
	<link rel="stylesheet" href="http://css-eblog.com/eblog_sample/css/base.css" type="text/css" />
	<link rel="stylesheet" href="http://css-eblog.com/eblog_sample/css/sample_layout.css" type="text/css" />
	<link rel="stylesheet" href="css/popupwindow.css" type="text/css" media="all" />
	<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="popupwindow.js"></script>
</head>

<body>
<div style="height:400px">
<a href="javascript:;" onclick="new $pop( 'アラート', { type: 'alert', title: 'alert', width: 500, height: 250} );">アラートボックスを表示</a>
</div>
</body>
</html>

フローティングウィンドウを簡単に実装できるスクリプトです。
alertやiframeにも対応していたり、DOMをコピーして表示したりと、機能満載。
チュートリアルは大変分かりやすく作られているので、そちらを参考にしてください。 

日本語なので製作元サイトへ行きご覧下さい。

関連スクリプト

感想

複数ウィンドウを出現させられて、それを維持できるのが自分的にに使いやすいと思いました。
iframeでページも読み込めるので、ログインとかにも使えそうですね。 

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。