ホームページ >ウェブフロントエンド >jsチュートリアル >任意の解像度で中央表示を実現する JS コントロールポップアップウィンドウ_JavaScript スキル

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

WBOYオリジナル: 2016-05-16 17:27:261893ブラウズ

代価

复制代代码如下:

弹出窗口_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;スパン>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jqueryは、選択および削除されたときに強調表示されるチェックボックスを備えたテーブル行を実装します_jquery次の記事：jqueryは、選択および削除されたときに強調表示されるチェックボックスを備えたテーブル行を実装します_jquery

続きを見る

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

関連記事

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