XP 종료 효과_javascript 기술을 모방한 JavaScript 팝업 창 기능

웹 사이트를 구축하든 일부 응용 프로그램 시스템을 구축하든 필연적으로 일부 팝업 효과를 사용하게 됩니다. ZJ-BLOG V1.0 Beta2 버전에서는 XP 종료를 모방하기 위해 인터넷에서 인기 있는 팝업 기능을 사용했습니다. 일부 기능에서는 효과가 있습니다. 현재 반응이 꽤 좋습니다. 필요한 경우 자체 웹사이트나 애플리케이션 시스템에서 직접 사용할 수 있습니다.
코드에 대해서는 자세히 설명하지 않겠습니다. 코드를 게시하기 전에 IE 환경에서는 드롭다운 박스(선택 요소)의 우선 순위가 너무 높기 때문에 팝업 div가 요소가 드롭다운 상자 요소를 덮을 수 없어서 매우 짜증스럽습니다. IE에 버그가 있습니다(개인적으로는 이것이 버그^o^라고 생각합니다). 제가 사용한 방법은 페이지의 모든 선택 요소를 숨기는 것입니다. 팝업창이 뜨고, 창이 연결되면 다시 표시되도록 하세요. 하하, 방법이 상대적으로 멍청한데, 정말 더 나은 방법이 생각나지 않네요. . .
여기에 게시된 효과는 두 가지입니다. 첫 번째는 팝업 시 페이지 배경이 직접적으로 반투명해지는 것이고, 두 번째는 XP 종료 효과와 더 비슷합니다. 즉, 배경이 점차적으로 반투명해집니다. 이 과정에서 두 효과의 차이점에 주목할 수 있습니다. 두 효과 모두 IE6 및 Firefox 테스트를 통과했습니다.
첫 번째 유형:

<title></title> <style> html,body{font-size:12px;margin:0px;height:100%;} .mesWindow{border:#666 1px solid;background:#fff;} .mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;} .mesWindowContent{margin:4px;font-size:12px;} .mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff} </style> <div style="padding:20px"> <div style="text-align:left"> <a href="#none" onclick="testMessageBox(event);"></a>팝업창</div> <div style="text-align:left;padding-left:20px;padding-top:10px"> <select><option></option>드롭다운 창</select> </div>은 팝업될 때 숨겨지고 닫힐 때 표시됩니다. 이는 팝업 DIV가 드롭을 차단하는 것을 방지하기 위한 것입니다. -IE의 다운 상자<div style="text-align:center"> <a href="#none" onclick="testMessageBox(event);"></a>팝업창</div> <div style="text-align:right"> <a href="#none" onclick="testMessageBox(event);"></a>팝업창</div> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

두 번째 유형(팝업 배경이 점차 반투명해지는 과정 참고):

<title> </title> <style> html,body{font-size:12px;margin:0px;height:100%;} .mesWindow{border:#666 1px solid;background:#fff;} .mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;} .mesWindowContent{margin:4px;font-size:12px;} .mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff} </style> <div style="padding:20px"> <div style="text-align:left"> <a href="#none" onclick="testMessageBox(event);"> </a> </div>팝업창<div style="text-align:left;padding-left:20px;padding-top:10px"> <select id="Select1" name="Select1"> <option></option></select>드롭다운 창</div> <div style="text-align:center">은 팝업될 때 숨겨지고 닫힐 때 표시됩니다. 이는 팝업 DIV가 드롭을 차단하는 것을 방지하기 위한 것입니다. -IE의 다운 상자<a href="#none" onclick="testMessageBox(event);"> </a> </div>팝업창<div style="text-align:right"><a href="#none" onclick="testMessageBox(event);"> </a></div>팝업창</div>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <script> var isIe=(document.all)?true:false; //设置select的可见状态 function setSelectState(state) { var objl=document.getElementsByTagName('select'); for(var i=0;i<objl.length;i++) { objl[i].style.visibility=state; } } function mousePosition(ev) { if(ev.pageX || ev.pageY) { return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } //弹出方法 function showMessageBox(wTitle,content,pos,wWidth) { closeWindow(); var bWidth=parseInt(document.documentElement.scrollWidth); var bHeight=parseInt(document.documentElement.scrollHeight); if(isIe){ setSelectState('hidden');} var back=document.createElement("div"); back.id="back"; var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;"; styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;"; back.style.cssText=styleStr; document.body.appendChild(back); var mesW=document.createElement("div"); mesW.id="mesWindow"; mesW.className="mesWindow"; mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"<td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /><div class='mesWindowContent' id='mesWindowContent'>"+content+"<div class='mesWindowBottom'>"; styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;"; mesW.style.cssText=styleStr; document.body.appendChild(mesW); } function showBackground(obj,endInt) { obj.filters.alpha.opacity+=1; if(obj.filters.alpha.opacity<endInt) { setTimeout(function(){showBackground(obj,endInt)},8); } } //关闭窗口 function closeWindow() { if(document.getElementById('back')!=null) { document.getElementById('back').parentNode.removeChild(document.getElementById('back')); } if(document.getElementById('mesWindow')!=null) { document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow')); } if(isIe){ setSelectState('');} } //测试弹出 function testMessageBox(ev) { var objPos = mousePosition(ev); messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文"; showMessageBox('窗口标题',messContent,objPos,350); } </script>]<script> var isIe=(document.all)?true:false; //设置select的可见状态 function setSelectState(state) { var objl=document.getElementsByTagName('select'); for(var i=0;i<objl.length;i++) { objl[i].style.visibility=state; } } function mousePosition(ev) { if(ev.pageX || ev.pageY) { return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } //弹出方法 function showMessageBox(wTitle,content,pos,wWidth) { closeWindow(); var bWidth=parseInt(document.documentElement.scrollWidth); var bHeight=parseInt(document.documentElement.scrollHeight); if(isIe){ setSelectState('hidden');} var back=document.createElement("div"); back.id="back"; var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;"; styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;"; back.style.cssText=styleStr; document.body.appendChild(back); showBackground(back,50); var mesW=document.createElement("div"); mesW.id="mesWindow"; mesW.className="mesWindow"; mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"<td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /><div class='mesWindowContent' id='mesWindowContent'>"+content+"<div class='mesWindowBottom'>"; styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;"; mesW.style.cssText=styleStr; document.body.appendChild(mesW); } //让背景渐渐变暗 function showBackground(obj,endInt) { if(isIe) { obj.filters.alpha.opacity+=1; if(obj.filters.alpha.opacity<endInt) { setTimeout(function(){showBackground(obj,endInt)},5); } }else{ var al=parseFloat(obj.style.opacity);al+=0.01; obj.style.opacity=al; if(al<(endInt/100)) {setTimeout(function(){showBackground(obj,endInt)},5);} } } //关闭窗口 function closeWindow() { if(document.getElementById('back')!=null) { document.getElementById('back').parentNode.removeChild(document.getElementById('back')); } if(document.getElementById('mesWindow')!=null) { document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow')); } if(isIe){ setSelectState('');} } //测试弹出 function testMessageBox(ev) { var objPos = mousePosition(ev); messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文"; showMessageBox('窗口标题',messContent,objPos,350); } </script>