纯js自定义弹窗

/**

 * 弹窗

 * 

 * 获取弹窗内穿出的数据：

 *     在弹窗页面调用父级页面的方法，例:parent.xxx(data);

 * 在 xxx()方法中将获取到的数据赋值给 abc 变量；在的点击弹

 * 窗确定按钮后调用 yyy()方法，将 abc 变量的值填充到页面的

 * 某处。

 * 

 * @param idName String 弹窗ID,不可重复

 * @param src String    要打开窗口的url

 * @param func function 回调函数,点击确定按钮后执行

 * @param title String  弹窗标题

 * @param divW int      弹窗宽度

 * @param divH int      弹窗高度

 * @param bottun boolean  是否显示确定按钮

 * @param topSize int   position的top值，距离顶部的距离，可用百分比

 * @param leftSize int  position的left值，距离顶部的距离，可用百分比

 * 

 * 可选参数可以填 null

 * function popup(idName,src[,func][,title][,divW][,divH][,bottun][,topSize][,leftSize]);

 */

function popup(idName,src,func,title,divW,divH,bottun,topSize,leftSize){

    if(typeof idName == 'undefined'){alert('ID名称没有');return;}

    if(typeof src == 'undefined'){alert('src没有');return;}

    if(typeof title == 'undefined'){title = '这是标题';}

    if(typeof func != 'function'){func = function(){}  }

    //弹窗宽度和高度

    var divW = (typeof divW == 'number') ? divW : 700;

    var divH = (typeof divH == 'number') ? divH : 500;

    //底边栏高度

    var divBottomH = (bottun == true) ? 40 : 30;

    var topSize = (typeof topSize == 'number' || typeof topSize == 'string' ) ? topSize : '3%';

    var leftSize = (typeof leftSize == 'number' || typeof leftSize == 'string' ) ? leftSize : '15%';

    var divTopH = 30;        //标题高度

    var divMiddleH = divH - divTopH - divBottomH;//iframe高度

    var div            = document.createElement('div');

    var divTop     = document.createElement('div');

    var divBigSmall    = document.createElement('div');

    var divClose       = document.createElement('div');

    var divLittle      = document.createElement('div');

    var divMiddle  = document.createElement('div');

    var divBottom      = document.createElement('div');

    var divBottonOk        = document.createElement('div');

    var divBottonCancel    = document.createElement('div');

    var divWiden       = document.createElement('div');

    //div 样式

    div.style.cssText = "width:"+divW+"px;height:"+divH+"px;position:fixed;top:"+topSize+";left:"+leftSize+";z-index:999;display:block;font-size:16px;font-family:Arial,'Microsoft YaHei';font-weight:bold;border:1px solid #3377bb;overflow:hidden;";

    div.id = idName;

    div.innerHTML = '';

    //divTop 样式

    divTop.style.cssText = "width:100%;height:"+divTopH+"px;line-height:"+divTopH+"px;text-indent:20px;color:#fff;background:#5599dd;cursor:move;";

    divLittle.style.cssText = "width:15px;height:13px;float:right;margin:8px 12px 0 0;cursor:pointer;border: 1px solid #fff;line-height:11px;text-indent:5px;font-weight:normal;";

    divBigSmall.style.cssText = "width:15px;height:13px;float:right;margin:8px 10px 0 0;cursor:pointer;border: 1px solid #fff;";

    divClose.style.cssText = "width:15px;height:13px;float:right;margin:8px 12px 0 0;cursor:pointer;border: 1px solid #fff;line-height:10px;text-indent:4px;font-weight:normal;font-size:13px;";

    divTop.innerHTML = title;

    divLittle.innerHTML = '-';

    divClose.innerHTML = 'x';

    //divMiddle 样式

    divMiddle.style.cssText = "width:100%;background:#fafaff;height:"+divMiddleH+"px;";

    divMiddle.innerHTML = '<iframe src="'+src+'" id="popup'+idName+'" name="popup'+idName+'" frameborder="0" width="100%" height="100%"></iframe>';

    //divBottom 样式

    divBottom.style.cssText = "width:100%;height:"+divBottomH+"px;background:#fafaff;";

    //ok cancel 样式

    var bottonH = 25;

    divBottonOk.style.cssText = "width:60px;height:"+bottonH+"px;float:right;line-height:"+bottonH+"px;background:#3377bb;cursor:pointer;text-align:center;color:white;margin:8px 20px 0 0;";

    divBottonCancel.style.cssText = "width:60px;height:"+bottonH+"px;float:right;line-height:"+bottonH+"px;background:#3377bb;cursor:pointer;text-align:center;color:white;margin:8px 20px 0 0;";

    divBottonOk.innerHTML = '确定';

    divBottonCancel.innerHTML = '取消';

    //右下拉动窗口 样式

    divWiden.style.cssText = "width:10px;height:10px;position:absolute;bottom:0px;right:0px;cursor:se-resize;";

    //OK 事件

    divBottonOk.onclick = function (){

        func();

        document.body.removeChild(div);

    }

    //cancel 事件

    divClose.onclick = divBottonCancel.onclick = function (){

        document.body.removeChild(div);

    }

    //移动窗口事件

    var L = null;    //上一次移动div后的div.style.left的值

    var T = null;

    divTop.onmousedown = function(e){

        var e = e || event;

        var left = e.clientX - div.offsetLeft;

        var top = e.clientY - div.offsetTop;

        document.onmousemove = function (ev){

            var ev = ev || event;

            L = div.style.left = ev.clientX - left + 'px';

            T = div.style.top = ev.clientY - top + 'px';

        }

        document.onmouseup = function (){

            document.onmousemove = null;

            document.onmouseup = null;

        }

    }

    //窗口放大缩小

    divBigSmall.onclick = divTop.ondblclick = function (){

        if(document.body.offsetWidth != div.offsetWidth - 2){

            div.style.top = '0px';

            div.style.left = '0px';

            div.style.width = '100%';

            div.style.height = '100%';

            divMiddle.style.height = div.offsetHeight - divTopH - divBottomH - 2 +'px';

        }else{

            if(L && T){

                div.style.top = T;

                div.style.left = L;

            }else{

                div.style.top = '5%';

                div.style.left = '15%';

            }

            div.style.width = divW+'px';

            div.style.height = divH+'px';

            divMiddle.style.height = divMiddleH+'px';

        }

    }

    //拉动改变窗口大小

    var W = null;

    var H = null;

    divWiden.onmousedown = function (e){

        var e = e || event;

        var X = e.clientX;

        var Y = e.clientY;

        divW = div.offsetWidth;

        divH = div.offsetHeight;

        document.onmousemove = function (ev){

            var ev = ev || event;

            W = ev.clientX - X;

            H = ev.clientY - Y;

            div.style.width = divW + W +'px';

            div.style.height = divH + H +'px';

            divMiddleH = div.offsetHeight - divTopH - divBottomH - 2;

            divMiddle.style.height = divMiddleH+'px';

        }

        document.onmouseup = function (){

            document.onmousemove = null;

            document.onmouseup = null;

            divW = divW + W;

            divH = divH + H;

        }

    }

    //最小化

    divLittle.onclick = function (){

        if(div.offsetWidth != 202 && div.offsetHeight != divTopH+2){

            div.style.width = '200px';

            div.style.height = divTopH+'px';

        }else{

            div.style.width = divW+'px';

            div.style.height = divH+'px';

        }

    }

    div.appendChild(divTop);

    divTop.appendChild(divClose);

    divTop.appendChild(divBigSmall);

    divTop.appendChild(divLittle);

    div.appendChild(divMiddle);

    divBottom.appendChild(divWiden);

    if(bottun){

        divBottom.appendChild(divBottonCancel);

        divBottom.appendChild(divBottonOk);

    }

    div.appendChild(divBottom);

    if(!document.getElementById(idName)){

        document.body.appendChild(div);

    }

};