<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <mce:style><!-- #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ position:absolute; background:#00F; width:3px; height:3px; z-index:6; font-size:0; } #rLeftDown,#rRightUp{cursor:ne-resize;} #rRightDown,#rLeftUp{cursor:nw-resize;} #rRight,#rLeft{cursor:e-resize;} #rUp,#rDown{cursor:n-resize;} #rLeftDown{left:-4px;bottom:-4px;} #rRightUp{right:-4px;top:-4px;} #rRightDown{right:-4px;bottom:-4px;background-color:#00F;} #rLeftUp{left:-4px;top:-4px;} #rRight{right:-4px;top:50%;margin-top:-4px;} #rLeft{left:-4px;top:50%;margin-top:-4px;} #rUp{top:-4px;left:50%;margin-left:-4px;} #rDown{bottom:-4px;left:50%;margin-left:-4px;} --></mce:style><style mce_bogus="1"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ position:absolute; background:#00F; width:3px; height:3px; z-index:6; font-size:0; } #rLeftDown,#rRightUp{cursor:ne-resize;} #rRightDown,#rLeftUp{cursor:nw-resize;} #rRight,#rLeft{cursor:e-resize;} #rUp,#rDown{cursor:n-resize;} #rLeftDown{left:-4px;bottom:-4px;} #rRightUp{right:-4px;top:-4px;} #rRightDown{right:-4px;bottom:-4px;background-color:#00F;} #rLeftUp{left:-4px;top:-4px;} #rRight{right:-4px;top:50%;margin-top:-4px;} #rLeft{left:-4px;top:50%;margin-top:-4px;} #rUp{top:-4px;left:50%;margin-left:-4px;} #rDown{bottom:-4px;left:50%;margin-left:-4px;} </style> <mce:script type="text/javascript"><!-- function createIframe(){ //mask遮罩层 var newMask=document.createElement("div"); newMask.id="mDiv"; newMask.style.position="absolute"; newMask.style.zIndex="1"; _scrollWidth=Math.max(document.body.scrollWidth,document.documentElement.scrollWidth); _scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); newMask.style.width=_scrollWidth+"px"; newMask.style.height=_scrollHeight+"px"; newMask.style.top="0px"; newMask.style.left="0px"; newMask.style.background = "#FFFFFF"; newMask.style.filter="alpha(opacity=10)"; newMask.style.opacity="0.10"; newMask.style.display='none'; // create div var objDiv=document.createElement("div"); objDiv.id="div1"; objDiv.name="div1"; objDiv.style.width="480px"; objDiv.style.height="204px"; objDiv.style.left=(_scrollWidth-480)/2+"px"; objDiv.style.top=(_scrollHeight-204)/2+"px"; objDiv.style.position="absolute"; objDiv.style.zIndex="2"; //加了这个语句让objDiv浮在newMask之上 objDiv.style.display="none"; //让objDiv预先隐藏 objDiv.style.backgroundColor = "#55A0FF"; //添加top上面内容 var str = ""; str = str + '<div style = "position:absolute;height:20px;z-index:3;top:0;font:新宋体; font-size:13pt;color:#FFFFFF;">有关DIV 拖动、缩放、遮罩效果</div>'; str = str + '<div id ="drag" style = "position:absolute;height:20px;width:100%;z-index:4;top:0;background-color:#FFFFFF;filter:alpha(opacity=10);opacity:0.10;"></div>'; str = str + '<input id="objClose" style = "position:absolute;height:20px;width:20px;z-index:5;top:0;font-size:13pt;right:0;border:solid #FFFFFF 1px; background-color:#FF0000;color:#FFFFFF;" type = "button" value="X" onclick = "HideIframe(document.getElementById(/'mDiv/'),document.getElementById(/'div1/'));" οnmοuseοver="handleOver()" οnmοuseοut="handleOut()"/>'; //LeftDown str = str + '<div id="rLeftDown" style="width:5px; height:5px;background:#0054E3;" οnmοusedοwn="moveStart(this);" οnmοusemοve="moving(this,6);"οnmοuseup="moveEnd(this);" ></div>'; //RightUp str = str + '<div id="rRightUp"style="width:5px; height:5px;background:#0054E3;" οnmοusedοwn="moveStart(this);" οnmοusemοve="moving(this,2);"οnmοuseup="moveEnd(this);" ></div>'; //RightDown str = str + '<div id="rRightDown"style="width:5px; height:5px;background:#0054E3;" οnmοusedοwn="moveStart(this);" οnmοusemοve="moving(this,4);"οnmοuseup="moveEnd(this);" ></div>'; //LeftUp str = str + '<div id="rLeftUp"style="width:5px; height:5px;background:#0054E3;" οnmοusedοwn="moveStart(this);" οnmοusemοve="moving(this,0);"οnmοuseup="moveEnd(this);" ></div>'; //Right str = str + '<div id="rRight"style="height:99%; top:5;background:#0054E3;" οnmοusedοwn="moveStart(this);" οnmοusemοve="moving(this,3);"οnmοuseup="moveEnd(this);" ></div>'; //Left str = str + '<div id="rLeft"style="height:99%; top:5;background:#0054E3;" οnmοusedοwn="moveStart(this);" οnmοusemοve="moving(this,7);"οnmοuseup="moveEnd(this);" ></div>'; //Up str = str + '<div id="rUp"style="width:99%; left:5;background:#0054E3;"οnmοusedοwn="moveStart(this);" οnmοusemοve="moving(this,1);"οnmοuseup="moveEnd(this);" ></div>'; //Down str = str + '<div id="rDown"style="width:99%; left:5;background:#0054E3;"οnmοusedοwn="moveStart(this);" οnmοusemοve="moving(this,5);"οnmοuseup="moveEnd(this);" ></div>'; objDiv.innerHTML = str; //添加边框样式 objDiv.style.border="solid #0033FF 3px;"; objDiv.style.borderTop = "2px solid #55A0FF"; objDiv.style.borderLeft = "2px solid #55A0FF"; objDiv.style.borderRight = "2px solid #55A0FF"; objDiv.style.borderBottom = "2px solid #55A0FF"; //create iframe var frm=document.createElement("iframe"); frm.id="ifrm"; frm.name="ifrm"; frm.style.position="absolute"; frm.style.width="99%"; frm.style.height=180; frm.style.top=20; frm.style.display=''; frm.frameborder=0; objDiv.appendChild(frm); document.body.appendChild(newMask); document.body.appendChild(objDiv); //实现拖动效果 var objDrag=document.getElementById("drag"); var drag=false; var dragX=0; var dragY=0; objDrag.attachEvent("onmousedown",startDrag); function startDrag(){ if(event.button == 1 && event.srcElement.tagName.toUpperCase() == "DIV"){ objDrag.setCapture(); objDrag.style.cursor = "move"; objDrag.style.zIndex = "1001"; drag = true; dragX = event.clientX; dragY = event.clientY; event.cancelBubble=true; event.returnValue=false; } }; objDrag.attachEvent("onmousemove",Drag); function Drag(){ if(drag){ var oldwin = objDrag.parentNode; //这样写拖动的时候会拖入到父窗体里面去 //oldwin.style.left = oldwin.offsetLeft + event.clientX - dragX; //oldwin.style.top = oldwin.offsetTop + event.clientY - dragY; oldwin.style.left = Math.max(oldwin.offsetLeft + event.clientX - dragX,0); oldwin.style.top = Math.max(oldwin.offsetTop + event.clientY - dragY,0); dragX = event.clientX; dragY = event.clientY; } }; objDrag.attachEvent("onmouseup",stopDrag); function stopDrag(){ objDrag.style.zIndex = "4"; objDrag.style.cursor = "default"; objDrag.releaseCapture(); drag=false; }; } //关闭按钮样式 function handleOut(){ var objButton = document.getElementById("objClose"); objButton.style.backgroundColor = "#FF0000"; objButton.style.zIndex = "5"; } function handleOver(){ var objButton = document.getElementById("objClose"); objButton.style.backgroundColor = "#FF8080"; objButton.style.zIndex = "1001"; } //添加iframe内容 function htmlEditor(){ var frm=document.getElementById("ifrm"); var objDiv=document.getElementById("div1"); var mDiv=document.getElementById("mDiv"); mDiv.style.display=''; var iframeTextContent=''; iframeTextContent+=' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">'; iframeTextContent+=' <html xmlns="http://www.w3.org/1999/xhtml">'; iframeTextContent+=' <head>'; iframeTextContent+=' <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />'; iframeTextContent+=' </head>'; iframeTextContent+=' <body>'; iframeTextContent+=' <table>'; iframeTextContent+=' <tr>'; iframeTextContent+=' <td>Name </td>'; iframeTextContent+=' <td> <input type="text" value="" /> </td>'; iframeTextContent+=' </tr>'; iframeTextContent+=' <tr>'; iframeTextContent+=' <td>Email </td>'; iframeTextContent+=' <td> <input type="text" value="" /> </td>'; iframeTextContent+=' </tr>'; iframeTextContent+=' <tr>'; iframeTextContent+=' <td> <input type="button" id="btGo" value="Go" /> </td>'; iframeTextContent+=' </tr>'; iframeTextContent+=' </table>'; iframeTextContent+=' </body>'; iframeTextContent+=' </html>'; frm.contentWindow.document.designMode='off'; frm.contentWindow.document.open(); frm.contentWindow.document.write(iframeTextContent); frm.contentWindow.document.close(); objDiv.style.display = ""; //显示浮动的div //点击go按钮关闭页面 var objGo=frm.contentWindow.document.getElementById("btGo"); objGo.attachEvent("onclick",function (){HideIframe(mDiv,objDiv);}); } //关闭页面 function HideIframe(mDiv,objDiv){ mDiv.style.display='none'; objDiv.style.display = "none"; //隐藏浮动的div } //实现缩放效果 var down = 0; function moveStart(obj){ var objDiv = obj.parentNode; obj.setCapture(); obj.style.zIndex = "1001"; down = 1; _styleWidth = objDiv.clientWidth; _styleHeight = objDiv.clientHeight; _styleLeft = objDiv.offsetLeft; _styleTop = objDiv.offsetTop; _sideLeft = event.clientX - _styleWidth; _sideRight = event.clientX + _styleWidth; _sideUp = event.clientY - _styleHeight; _sideDown = event.clientY + _styleHeight; _fixLeft = _styleWidth + _styleLeft; _fixTop = _styleHeight + _styleTop; event.cancelBubble = true; event.returnValue = false; } function moving(obj,num){ if(down){ var objDiv = obj.parentNode; var frm = document.getElementById("ifrm"); switch(num){ //左上角 case 0: _styleWidth = Math.max(xx = _sideRight - event.clientX,0); objDiv.style.width = _styleWidth; objDiv.style.left = _fixLeft - _styleWidth; _styleHeight = Math.max(yy = _sideDown - event.clientY,0); objDiv.style.height = _styleHeight; objDiv.style.top = _fixTop - _styleHeight; try{ frm.style.width = (xx - 4) + "px"; frm.style.height = (yy - 24) + "px"; }catch(e){} break; //上边 case 1: _styleHeight = Math.max(yy = _sideDown - event.clientY,0); objDiv.style.height = _styleHeight; objDiv.style.top = _fixTop - _styleHeight; try{ frm.style.height = (yy - 24) + "px"; }catch(e){} break; //右上角 case 2: _styleWidth = Math.max(xx = event.clientX - _sideLeft,0); objDiv.style.width = _styleWidth; _styleHeight = Math.max(yy = _sideDown - event.clientY,0); objDiv.style.height = _styleHeight; objDiv.style.top = _fixTop - _styleHeight; try{ frm.style.width = (xx - 4) + "px"; frm.style.height = (yy - 24) + "px"; }catch(e){} break; //右边 case 3: _styleWidth = Math.max(xx = event.clientX - _sideLeft,0); objDiv.style.width = _styleWidth; try{ frm.style.width = (xx - 4) + "px"; }catch(e){} break; //右下角 case 4: _styleWidth = Math.max(xx = event.clientX - _sideLeft,0); objDiv.style.width = _styleWidth; _styleHeight = Math.max(yy = event.clientY - _sideUp,0); objDiv.style.height = _styleHeight; try{ frm.style.width = (xx - 4) + "px"; frm.style.height = (yy - 24) + "px"; }catch(e){} break; //下边 case 5: _styleHeight = Math.max(yy = event.clientY - _sideUp,0); objDiv.style.height = _styleHeight; try{ frm.style.height = (yy - 24) + "px"; }catch(e){} break; //左下角 case 6: _styleWidth = Math.max(xx = _sideRight - event.clientX,0); objDiv.style.width = _styleWidth; objDiv.style.left = _fixLeft - _styleWidth; _styleHeight = Math.max(yy = event.clientY - _sideUp,0); objDiv.style.height = _styleHeight; try{ frm.style.width = (xx - 4) + "px"; frm.style.height = (yy - 24) + "px"; }catch(e){} break; //左边 case 7: _styleWidth = Math.max(xx = _sideRight - event.clientX,0); objDiv.style.width = _styleWidth; objDiv.style.left = _fixLeft - _styleWidth; try{ frm.style.width = (xx - 4) + "px"; }catch(e){} break; }; } } function moveEnd(obj){ down = 0; //obj.style.cursor = "default";//如果不注释掉第二次点击的时候就不出现拉动鼠标样式 obj.style.zIndex = "6"; obj.releaseCapture(); } // --></mce:script> </head> <body onLoad="createIframe()"> <table> <tr> <td>aa</td> <td><input type="text"/></td> </tr> <tr> <td>bb</td> <td><input type="text"/></td> </tr> </table> <br/> <input type="button"id="tt"name="tt"value="Click"onClick="htmlEditor()"/> </body> </html>