Js控制彈窗實作在任意解析度下居中顯示_javascript技巧

貼代碼

複製代碼 代碼如下：

BR>
UBL //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


>



script>

$(文檔).ready(function (){
$("#btn_center").click(function (){
$(window ).scroll(function (){
popcenterWindow( );
});
$("#btn_right").click(function (){
$(window).scroll(function (function (function) (function (){
$(window).scroll(function ( ){
poprightWindow( );
});
$("#btn_left").click(function (){
$(window).scroll(function (){
popleftWindow ( );
});
});
腳本>
頭>

csdn歡迎您

哈哈哈哈

csdn歡迎您

哈哈哈哈

csdn歡迎您

哈哈哈哈

身體>

JS

複製程式碼程式碼如下：

//視窗的高度
var windowHeight;
//視窗的寬度
var windowWidth;
//彈窗的高度
var popHeight
/; /彈窗的寬度
var popWidth;
//滾動條滾動的高度
var scrollTop;
//滾動條滾動的寬度
var scrollleft;
//延遲的時間
var timeout;
function init(){
//取得視窗的高度
windowHeight=$(window).height();
//取得視窗的寬度
windowWidth=$(window).width();
//取得彈跳窗的高度
popHeight=$(".window").height();
//取得彈窗的寬度
popWidht=$(".window").width();
//取得捲軸的高度
scrollTop=$(window).scrollTop();
//取得捲軸的寬度
scrollleft=$(window).scrollLeft();
}
//定義關閉視窗
function closeWindow(){
$(".title img").click(function ( ){
$(this).parent().parent().hide("slow");

});

}
//定義彈出視窗的方法
function popcenterWindow(){
//先清空上一次的延遲
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=(windowHeight-popHeight)/2 scrollTop;
var popX=(windowWidth-popWidht)/2 scrollleft;
$("#center").animate({top:popY,left:popX},300 ).show("slow");},300);
closeWindow();
}
function popleftWindow(){
clearTimeout(timeout);
timeout=setTimeout(function ( ){
init();
var popY=windowHeight scrollTop-popHeight-10;
var popX=scrollleft-5;
$("#left").animate({top:popY,Y, left:popX},300).show("slow");},300);
closeWindow();
}
function poprightWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight-popHeight scrollTop-10;
var popX=windowWidth-popWidht scrollleft-10;
$("" ).animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}

CSS

複製程式碼 程式碼如下:

.window{
width:250px;
background-color:#3FF;
padding:2px;
margin:5px;
position:absolute;
margin:5px;
position:absolute;
display:5px;
position:absolute;
display:none; >}
.content{
height:150px;
background-color:#FFF;
padding:2px;
font-size:14px;
overflow:auto;
}

.title{
padding:2px;
color:#999;
font-size:14px;
}
.title img{
float :right;

cursor:pointer; }