基于jquery的顯示窗體控件 可控制位置

基于jquery開放的顯示窗體控件，可設置<div>的位置在中間或左下角，或右下角。

//顯示一個指定位置的窗口，這個是基于jquery開發的，必須引入jquery包，沒有的搜下，到處都是，一腳踩一個
/*
*@param position如果是center就在瀏覽器的中間
如果是rigthDown就在瀏覽器的右下角
如果是leftDown就在瀏覽器的坐下角
如果輸入的是個json對象就安坐標設置位置例如：{left:100,top:100}
*/
$.fn.myWindows = function(position) {

var windowobj = $(window);
var browserWidth = windowobj.width(); //瀏覽器的寬
var browserHieght = windowobj.height(); //瀏覽器的高
var scrollLeft = windowobj.scrollLeft(); //滾動條的橫位置
var scrollTop = windowobj.scrollTop(); //滾動條的豎位置
var selfWidth = this.outerWidth(true); //這個元素的寬包括magin,padding
var selfHeight = this.outerHeight(true); //這個元素的高包括magin,padding

var left;
var top;
//中間的窗口
if (position == "center") {
left = scrollLeft + (browserWidth - selfWidth) / 2; //獲取左邊的距離
top = scrollTop + (browserHieght - selfHeight) / 2; //獲取上邊的距離
} else if (position == "rigthDown") {
//右下角窗口
left = scrollLeft + browserWidth - selfWidth;
top = scrollTop + browserHieght - selfHeight;
} else if ("leftDown") {
left = scrollLeft + 0;
top = scrollTop + browserHieght - selfHeight;
}
else if (position && position instanceof Object) {
left = position.left;
top = position.top;
}
this.css("position", "absolute"); //讓這個容器絕對定位
this.css("left", left).css("top", top); //設置這個元素的位置

var self = this;
//找到這個元素下clsss是title的元素，這個元素下的圖片點擊事件，讓這個窗口隱藏
this.children(".title").children("img").click(function() {
self.hide("show");
});

return this; //返回對象本身方便連級操作
}

下面是調用的方法：

html代碼：

<div style="width:100px;height:100px;display:none">
<div class="title">
<img src=''/>
這個是窗體的標題部分，class必須等于title這個圖片用來關閉這個窗口的
<div>
這里是你的內容
<div>
<input type="button" id="showDiv" value="顯示窗體" onclick="showWindows()">

javascript代碼：

<script>
function showWindows() {
$("#windwosDiv").myWindows("leftDown");
}
</script>

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈