JavaScript pop-up window function that imitates XP shutdown effect

Whether you are building a website or some application systems, you will inevitably use some pop-up effects. In the ZJ-BLOG V1.0 Beta2 version, I used the pop-up function that is popular on the Internet to imitate the XP shutdown effect in some functions. According to the current The response is pretty good. Let’s adjust this function. If necessary, you can use it directly in your own website or application system.
I won’t explain the code in detail. Before posting the code, I need to explain that in the IE environment, because the priority of the drop-down box (select element) is too high, the pop-up div element cannot cover the drop-down box element, which is very annoying. There is a BUG in IE (I personally think it is a BUG^o^). The method I used is to hide all the select elements in the page when they pop up, and let them display again when the window is connected. Haha, the method is relatively stupid, but I really can’t think of a better way. . .
There are two effects posted here. The first one is that the background of the page directly becomes translucent when it pops up, while the second one is more similar to the XP shutdown effect, that is, the background gradually becomes translucent. During the process, you can pay attention to the difference between the two effects. Both effects have passed the test of IE6 and firefox.
The first type:

<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>Pop-up window</div>
<div style="text-align:left;padding-left:20px;padding-top:10px">
<select><option></option>The drop-down window </select>
</div> will be hidden when it pops up and will be displayed when it is closed. The purpose is to prevent the pop-up DIV from blocking the drop-down box in IE<div style="text-align:center">
<a href="#none" onclick="testMessageBox(event);"></a>Pop-up window</div>
<div style="text-align:right">
<a href="#none" onclick="testMessageBox(event);"></a>Pop-up window</div>
</div>

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

The second type (note the pop-up The process of the background gradually becoming translucent):

<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>Pop-up window<div style="text-align:left;padding-left:20px;padding-top:10px">
<select id="Select1" name="Select1">
<option></option></select>The drop-down window </div>
<div style="text-align:center"> will be hidden when it pops up and will be displayed when it is closed. The purpose is to prevent the pop-up DIV from blocking the drop-down box in IE<a href="#none" onclick="testMessageBox(event);">
</a>
</div>Pop-up window<div style="text-align:right"><a href="#none" onclick="testMessageBox(event);">
</a></div>Pop-up window</div>

[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute <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>

JavaScript pop-up window function that imitates XP shutdown effect_javascript skills