jQuery彈出窗口完整代碼(居中,居左,居右)
更新時間:2012年10月10日 00:53:39 作者:
jQuery彈出窗口完整代碼,可以實現(xiàn)窗口居中,居左,居右顯示,比較不錯,需要的朋友可以參考下
核心代碼:
//獲取窗口的高度
var windowHeight;
//獲取窗口的寬度
var windowWidth;
//獲取彈窗的寬度
var popWidth;
//獲取彈窗高度
var popHeight;
function init(){
windowHeight=$(window).height();
windowWidth=$(window).width();
popHeight=$(".window").height();
popWidth=$(".window").width();
}
//關(guān)閉窗口的方法
function closeWindow(){
$(".title img").click(function(){
$(this).parent().parent().hide("slow");
});
}
//定義彈出居中窗口的方法
function popCenterWindow(){
init();
//計算彈出窗口的左上角Y的偏移量
var popY=(windowHeight-popHeight)/2;
var popX=(windowWidth-popWidth)/2;
//alert('chabaoo.cn');
//設(shè)定窗口的位置
$("#center").css("top",popY).css("left",popX).slideToggle("slow");
closeWindow();
}
function popLeftWindow(){
init();
//計算彈出窗口的左上角Y的偏移量
var popY=windowHeight-popHeight;
//var popX=-(windowWidth-popWidth);
//alert(popY);
//設(shè)定窗口的位置
$("#left").css("top",popY-50).css("left",50).slideToggle("slow");
closeWindow();
}
function popRightWindow(){
init();
//計算彈出窗口的左上角Y的偏移量
var popY=windowHeight-popHeight;
var popX=windowWidth-popWidth;
//alert(www.cnblogs.com/jihua);
//設(shè)定窗口的位置
$("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow");
closeWindow();
}
完整代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
作者 cnblogs jihua
復(fù)制代碼 代碼如下:
//獲取窗口的高度
var windowHeight;
//獲取窗口的寬度
var windowWidth;
//獲取彈窗的寬度
var popWidth;
//獲取彈窗高度
var popHeight;
function init(){
windowHeight=$(window).height();
windowWidth=$(window).width();
popHeight=$(".window").height();
popWidth=$(".window").width();
}
//關(guān)閉窗口的方法
function closeWindow(){
$(".title img").click(function(){
$(this).parent().parent().hide("slow");
});
}
//定義彈出居中窗口的方法
function popCenterWindow(){
init();
//計算彈出窗口的左上角Y的偏移量
var popY=(windowHeight-popHeight)/2;
var popX=(windowWidth-popWidth)/2;
//alert('chabaoo.cn');
//設(shè)定窗口的位置
$("#center").css("top",popY).css("left",popX).slideToggle("slow");
closeWindow();
}
function popLeftWindow(){
init();
//計算彈出窗口的左上角Y的偏移量
var popY=windowHeight-popHeight;
//var popX=-(windowWidth-popWidth);
//alert(popY);
//設(shè)定窗口的位置
$("#left").css("top",popY-50).css("left",50).slideToggle("slow");
closeWindow();
}
function popRightWindow(){
init();
//計算彈出窗口的左上角Y的偏移量
var popY=windowHeight-popHeight;
var popX=windowWidth-popWidth;
//alert(www.cnblogs.com/jihua);
//設(shè)定窗口的位置
$("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow");
closeWindow();
}
完整代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
作者 cnblogs jihua
相關(guān)文章
jQuery)擴展jQuery系列之一 模擬alert,confirm(一)
很多人都為了使alert系統(tǒng)的調(diào)用函數(shù)在自己的控制范圍之內(nèi),都選擇了去封裝一個屬于自己的alert組件,現(xiàn)在我們就動手實現(xiàn)一個這樣的小部件。2010-12-12jQuery+slidereveal實現(xiàn)的面板滑動側(cè)邊展出效果
WEB開發(fā)中有時需要在頁面上設(shè)置一個控制面板,默認是不顯示的,當(dāng)用戶有需要時可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實例給大家介紹一下面板滑動展示效果。2015-03-03jQuery 實現(xiàn)鼠標(biāo)畫框并對框內(nèi)數(shù)據(jù)選中的實例代碼
本文通過實例代碼給大家介紹了jQuery 實現(xiàn)鼠標(biāo)畫框并對框內(nèi)數(shù)據(jù)選中的實例代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-08-08利用jQuery來動態(tài)為屬性添加或者刪除屬性的簡單方法
下面小編就為大家?guī)硪黄胘Query來動態(tài)為屬性添加或者刪除屬性的簡單方法。小編覺的挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12jquery全選/全不選/反選另一種實現(xiàn)方法(配合原生js)
本文主要介紹下jquery另一種全選、全不選、反選的方式(與原生js混合使用),感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04