任意の解像度で中央表示を実現する JS コントロールポップアップウィンドウ

任意の解像度で中央表示を実現する JS コントロールポップアップウィンドウ_JavaScript スキル

WBOY

リリース： 2016-05-16 17:27:26

オリジナル

1892 人が閲覧しました

代価

复制代代码如下:

弹出窗口_www.jb51.net

<スクリプト言語="javascript">
$(document).ready(function (){
$("#btn_center").click(function (){
$(window).scroll(function (){
popcenterWindow( );
});
});
$("#btn_right").click(function (){
poprightWindow( );
});
});
$("#btn_left").click(function (){
popleftWindow( );
});
});

gt;

;

gt;

;

csdn欢迎您

哈哈哈哈哈哈哈

csdn欢迎您

哈哈哈哈哈哈哈

csdn欢迎您

哈哈哈哈哈哈哈

复制代码代码如下:

 
//ウィンドウの高さ
var windowHeight 
//ウィンドウの幅
var windowWidth; 
//ポップアップウィンドウの高さ
var PopHeight; ; 
/ /ポップアップウィンドウの幅
var PopWidth>//スクロールバーの高さ
varscrollTop; 
varscrollleft; 
//遅延時間 
var timeout; 
function init(){ 
//ウィンドウの高さを取得
windowHeight=$(window).height( ); 
//ウィンドウの幅を取得します
windowWidth=$(window).width(); 
//ポップアップ ウィンドウの高さを取得します
popHeight=$(". window").height(); 
//ポップアップウィンドウの幅を取得します
popWidht=$(".window").width(); 
//スクロールの高さを取得しますbar
scrollTop=$(window).scrollTop(); 
//スクロールバーの幅を取得します 
scrollleft=$(window).scrollLeft(); 
//閉じるウィンドウを定義する 
function closeWindow(){ 
$(".title img").click(function ( ){ 
$(this).parent().parent().hide("slow" ); 

}); 

} 
// ポップアップ ウィンドウを定義します。 メソッド 
function PopcenterWindow(){ 
// 最初に最後の遅延をクリアします 
clearTimeout(タイムアウト); 
timeout=setTimeout(function (){ 
init(); 
var PopY=(windowHeight-popHeight)/2scrollTop; 
var PopX=(windowWidth-popWidht) /2 スクロール左; 
$("#center").animate({top:popY,left:popX},300 ).show("slow");},300); 🎜>} 
function PopleftWindow(){ 
clearTimeout(timeout); 
timeout=setTimeout(function ( ){ 
init(); 
var PopY=windowHeightscrollTop-popHeight-10; 
var PopX=scrollleft-5; 
$("#left").animate({top:popY, left:popX},300).show("slow");},300); >closeWindow(); 
} 
function PoprightWindow(){ 
clearTimeout(タイムアウト) 
 timeout=setTimeout(function (){ 
init(); 
var PopY=windowHeight -popHeightscrollTop-10;
varpopX=windowWidth-popWidhtscrollleft-10;
$("#right" ).animate({top:popY,left:popX},300).show("slow" );},300); 
closeWindow() 
} 

 
CSS 

コードをコピーします

コードは次のとおりです。 .window{ width:250px; background-color: #3FF; パディング:2px;

位置:絶対;

} 
高さ:150px; >背景色:#FFF; 
フォントサイズ:14px; 
} 

パディング:2px ; 
color:#999; 
font-size:14px; 
float:right; 
cursor:pointer;スパン>

任意の解像度で中央表示を実現する JS コントロール ポップアップ ウィンドウ_JavaScript スキル

任意の解像度で中央表示を実現する JS コントロールポップアップウィンドウ_JavaScript スキル