jQuery ポップアップ ウィンドウの完全なコード (中央、左、右)_jquery

コアコード:

コードをコピー コードは次のとおりです:

//高さを取得します。 window
var windowHeight;
// ウィンドウの幅を取得します
var windowWidth;
// ポップアップ ウィンドウの幅を取得します
var PopWidth;ポップアップウィンドウの高さを取得します
var PopHeight; function init(){
windowHeight=$(window).height();
windowWidth=$(window).width() ;
popHeight=$(".window").height( );
popWidth=$(".window").width();
}
//ウィンドウを閉じるメソッド
function closeWindow(){
$(".title img" ).click(function(){
$(this).parent().parent().hide("slow");
});
}
//ポップアップを中央に配置するウィンドウを定義します。 Method
function PopCenterWindow(){
init();
//左上隅の Y オフセットを計算します。ポップアップウィンドウ
var PopY=(windowHeight-popHeight)/2;
var PopX=(windowWidth-popWidth)/2;
//alert('www.jb51.net'); 🎜>//ウィンドウの位置を設定します
$("#center").css( "top",popY).css("left",popX).slideToggle("slow"); ();
}
function PopLeftWindow(){
init()>//ポップアップ ウィンドウの左上隅の Y のオフセットを計算します
var PopY=windowHeight -popHeight;
//var PopX=-(windowWidth-popWidth);
//alert(popY);
$("#left"); css("top",popY-50).css("left",50).slideToggle("slow");
closeWindow();
関数 PopRightWindow(){
init ();
//ポップアップウィンドウの左上隅の Y オフセットを計算します
var PopY=windowHeight-popHeight;
var PopX=windowWidth-popWidth; www.cnblogs.com/jihua);
//ウィンドウの位置を設定します
$("#right").css(" top",popY-50).css("left",popX- 50).slideToggle("slow");
closeWindow()
}


完全なコード:

jQuery ポップアップ ウィンドウ - スクリプト ホーム

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style type="text/css"> .window{ width:250px; background-color:#d0def0; position:absolute; padding:2px; margin:5px; display:none; } .content{ height:150px; background-color:#FFF; font-size:14px; overflow:auto; } .title{ padding:2px; color:#0CF; font-size:14px; } .title img{ float:right; } </style> <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;"> <input type="button" value="居中窗口" id="btn_center">ホーム中心のウィンドウをスクリプト化します<input type="button" value="居左下角" id="btn_left"> <input type="button" value="居右下角" id="btn_right">www.jb51.net</div> <div class="window" id="center"> <div id="title" class="title"> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201210/close.jpg" class="lazy" alt="jQuery ポップアップ ウィンドウの完全なコード (中央、左、右)_jquery"> </div>ホーム左ウィンドウをスクリプト化します<div class="content"> </div>www.jb51.net</div> <div class="window" id="left"> <div id="title2" class="title"> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201210/close.jpg" class="lazy" alt="jQuery ポップアップ ウィンドウの完全なコード (中央、左、右)_jquery"> </div>スクリプトホーム右ウィンドウ<div class="content"> </div>www.jb51.net</div> <div class="window" id="right"> <div id="title3" class="title"> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201210/close.jpg" class="lazy" alt="jQuery ポップアップ ウィンドウの完全なコード (中央、左、右)_jquery"> </div> <div class="content"></div> </div> [Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります
]作成者cnblogs ジファ