基于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", "fixed"); //让这个容器绝对定位
    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>