例1：シンプルなモーダルウィンドウ
Simple Window Modal
例2：ログインフォームをモーダル表示
Login Dialog Box
例3：モーダルウィンドウをスタイリング
Sticky Note
So, with this Simple Jquery Modal Window, it can be in any shapes you want! Simple and Easy to modify : )
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Simple jQuery Modal Window Tutorial | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(){
/* href属性を取得 */
var id = $(this).attr('href');
/* スクリーンの高さと幅を取得 */
var maskHeight = $(document).height();
var maskWidth = $(window).width();
/* スクリーン全体をおおうマスクの高さと幅を指定 */
$('#mask').css({'width':maskWidth,'height':maskHeight});
/* フェード効果を付ける */
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
/* ウィンドウの高さと幅を取得 */
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
/* ウィンドウの中央にポップアップするよう設定 */
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
/* フェード効果を付ける */
$(id).fadeIn(2000);
});
/* 閉じるボタンがクリックされた時 */
$('.window .close').click(function(){
$('#mask, .window').hide();
});
/* マスクがクリックされた時 */
$('#mask').click(function(){
$(this).hide();
$('.window').hide();
});
});
</script>
<style type="text/css">
/* Z-index of #mask must lower than #boxes .window */
#mask {
position:absolute;
left:0; top:0;
z-index:9000;
background-color:#000;
display:none;
}
.window {
position:absolute;
left:0; top:0;
width:440px; height:200px;
display:none;
z-index:9999;
padding:20px;
}
#dialog {
width:375px; height:203px;
padding:10px;
background-color:#fff;
}
/* 例2 */
#dialog1 {
width:375px; height:203px;
}
#dialog1 .d-header {
background:url(/content/img/ajax/simple_jquery_modal_window/login-header.png) no-repeat 0 0 transparent;
width:375px; height:150px;
}
#dialog1 .d-header input {
position:relative;
top:60px; left:100px;
width:200px; height:22px;
margin:4px 0 0 0; padding:5px;
border:3px solid #ccc;
font-size:15px;
}
#dialog1 .d-blank {
float:left;
background:url(/content/img/ajax/simple_jquery_modal_window/login-blank.png) no-repeat 0 0 transparent;
width:267px; height:53px;
}
#dialog1 .d-login {
float:left;
width:108px; height:53px;
margin:0; padding:0;
}
#dialog1 .d-login input {
margin:0; padding:0;
}
/* 例3 */
#dialog2 {
background:url(/content/img/ajax/simple_jquery_modal_window/notice.png) no-repeat 0 0 transparent;
width:326px; height:229px;
padding:50px 0 20px 25px;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://www.queness.com/post/77/simple-jquery-modal-window-tutorial'>Simple jQuery Modal Window Tutorial</a></h1>
<!-- CODE -->
<h2>例1：シンプルなモーダルウィンドウ</h2>
<!-- #dialog is the id of a DIV defined in the code below -->
<p><a href="#dialog" name="modal">Simple Window Modal</a></p>
<!-- #customize your modal window here -->
<div id="dialog" class="window">
<b>Testing of Modal Window</b> |
<!-- close button is defined as close class -->
<a href="#" class="close">Close it</a>
</div>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<div id="mask"></div>
<h2>例2：ログインフォームをモーダル表示</h2>
<p><a href="#dialog1" name="modal">Login Dialog Box</a></p>
<!-- Start of Login Dialog -->
<div id="dialog1" class="window">
<div class="d-header">
<input type="text" value="username" onclick="this.value=''" /><br>
<input type="password" value="Password" onclick="this.value=''" />
</div>
<div class="d-blank"></div>
<div class="d-login"><input type="image" alt="Login" title="Login" src="/content/img/ajax/simple_jquery_modal_window/login-button.png"/></div>
</div>
<!-- End of Login Dialog -->
<h2>例3：モーダルウィンドウをスタイリング</h2>
<p><a href="#dialog2" name="modal">Sticky Note</a></p>
<!-- Start of Sticky Note -->
<div id="dialog2" class="window">
So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want! Simple and Easy to modify : ) <br><br>
<input type="button" value="Close it" class="close"/>
</div>
<!-- End of Sticky Note -->
<!-- / CODE -->
</body>
</html>