- function showWin(title,html,width,height,modal,type,url)
- {
- //设置窗口大小
- if(width<400)
- {
- width=400;
- }
- if(height<200)
- {
- height=200;
- }
- //body内边大小
- var cw=document.body.clientWidth;
- var ch=document.body.clientHeight;
- //文本框大小
- var sw=document.body.scrollWidth;
- var sh=document.body.scrollHeight;
- //可见区域坐标
- var st = document.body.scrollTop;
- var sl = document.body.scrollLeft;
- var w=cw>sw?cw:sw;
- var h=ch>sh?ch:sh;
- //创建模态
- if(modal)
- {
- var mask=document.createElement("div");
- mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:100;width:" + w + "px;height:" + h + "px;";
- document.body.appendChild(mask);
- }
- // 创建主窗口
- var win=document.createElement("div");
- win.style.cssText="position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) + "px;background:#f0f0f0;z-index:101;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;";
- //标题栏目
- var tBar=document.createElement("div");
- tBar.style.cssText="margin:0;width:" + width + "px;height:25px;background:green;cursor:move;";
- //给标题栏加文字
- var tText=document.createElement("div");
- tText.style.cssText="float:left;margin-left:30px;text-align:center;height:25px;line-height:25px;width:"+(width-80)+"px;";
- tText.innerHTML=title;
- tBar.appendChild(tText);
- //添加关闭按钮
- var closeButton=document.createElement("div");
- closeButton.style.cssText="float:right;width:20px;margin:3px;cursor:pointer;color:red;";
- closeButton.innerHTML="X";
- tBar.appendChild(closeButton);
- win.appendChild(tBar);
- //窗口主体
- var bodyCon=document.createElement("div");
- bodyCon.style.cssText="text-align:left;width:" + width + "px;height:" + (height -50) + "px;overflow:auto;";
- switch(type)
- {
- case "file":
- var formCon=document.createElement("form");
- formCon.action=url;
- formCon.method="post";
- formCon.enctype="multipart/form-data";
- formCon.target="hidFram";
- formCon.id="formCon";
- formCon.name="formCon";
- formCon.innerHTML="<br/><label>请选择文件:</label>"+html;
- bodyCon.appendChild(formCon);
- var framCon=document.createElement("iframe");
- framCon.name="hidFram";
- framCon.id="hidFram";
- framCon.style.cssText="width:400px;height:200px;";
- bodyCon.appendChild(framCon);
- //当framCon内容加载完时,设置内容
- framCon.onload = function(){
- $res=framCon.contentWindow.document.body.innerHTML;
- alert($res+"Local iframe is now loaded.");
- }
- break;
- default:
- bodyCon.innerHTML=html;
- }
- win.appendChild(bodyCon);
- //窗体底部的按钮部分
- var btnCon = document.createElement('div');
- btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:#EED5B7;text-align:center;padding-top:3px;";
- var subButton=document.createElement("button");
- subButton.style.cssText="float:right;";
- subButton.name="submit";
- subButton.innerHTML="确定";
- btnCon.appendChild(subButton);
- //用户填充按钮之间的空白
- var nbsp = document.createElement('label');
- nbsp.innerHTML = " ";
- btnCon.appendChild(nbsp);
- var celButton=document.createElement("button");
- celButton.style.cssText="float:right;";
- celButton.name="cancel";
- celButton.innerHTML="取消";
- btnCon.appendChild(celButton);
- win.appendChild(btnCon);
- document.body.appendChild(win);
- //添加关闭按钮
- //var closeBt=document.createElement("button");
- //closeBt.innerHTML="关闭";
- //拖动窗口
- //鼠标坐标
- var mouseX=0;
- var mouseY=0;
- //窗口相对坐标
- var toTop=0;
- var toLeft=0;
- //判断鼠标是否可以移动
- var moveable=false;
- //标题栏被按下时初始化数据
- tBar.οnmοusedοwn=function()
- {
- var action=getEvent();
- moveable=true;
- mouseX=action.clientX;
- mouseY=action.clientY;
- toTop=parseInt(win.style.top);
- toLeft=parseInt(win.style.left);
- tBar.οnmοusemοve=function()
- {
- if(moveable)
- {
- var eve=getEvent();
- var x=toLeft+eve.clientX-mouseX;
- var y=toTop+eve.clientY-mouseY;
- //判断是否在窗口里面
- if(x>0&&(x+width<w)&&y>0&&(y+height<h))
- {
- win.style.left=x+"px";
- win.style.top=y+"px";
- }
- }
- }
- //释放鼠标不移动
- document.οnmοuseup=function()
- {
- moveable=false;
- }
- }
- closeButton.οnclick=celButton.οnclick=function()
- {
- document.body.removeChild(win);
- if(mask)
- {
- document.body.removeChild(mask);
- }
- }
- subButton.οnclick=function()
- {
- if(type=="file")
- {
- formCon.submit();
- }
- document.body.removeChild(win);
- if(mask)
- {
- document.body.removeChild(mask);
- }
- }
- }
- //获取事件
- function getEvent()
- {
- return window.event || arguments.callee.caller.arguments[0];
- }
- function show(num,str,html)
- {
- //num控制显示类型
- switch(num)
- {
- case 1:
- var content=" <input type='file' name='upfile'/><br/>"
- showWin('上传文件',content,300,100,true,"file",html);
- break;
- default:
- showWin('消息',str,300,100,true,"file",0);
- }
- }
js弹出窗口实现动态文件上传
最新推荐文章于 2020-10-07 20:43:27 发布