四种弹出层带遮罩-windows-操作系统-六狼论坛-IT论坛-计算机论坛

kinyum_li 发表于 2013-2-7 03:32:34

四种弹出层带遮罩

弹出层效果一：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>弹出层效果</title><style type="text/css"> </style><script language="javascript" type="text/javascript">function showDiv(){document.getElementById('popDiv').style.display='block';document.getElementById('bg').style.display='block';}function closeDiv(){document.getElementById('popDiv').style.display='none';document.getElementById('bg').style.display='none';}</script></head><body><div id="popDiv" class="mydiv" style="display:none;">启己记录<br/>vvwww.com<br/><a href="javascript:closeDiv()">关闭窗口</a></div><div id="bg" class="bg" style="display:none;"></div><div style="height:200px; line-height:200px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a></div></body></html>弹出层效果二：<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>你可以拖动我吗？</title> <script language="javascript">  </script> <script language="javascript">  </script> </head> <body style="margin:0;"> <input type=submit name="cry" value="点击我一下下^_^" style="width: 110px; height: 30px" onclick='return cry();'></input> </body> </html>弹出层效果三：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>提示</title></head><body><script language=javascript>var cao_x,cao_y;function cao888() {this.display=display; }function display() { document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>CAO留言</button></td></tr></table>"); document.write("<div id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'>"); document.write("<div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>"); document.write("<table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='caoMove(this.parentNode)' style='cursor:move;'>"); document.write("<tr align=center>"); document.write("<td align=left>提示:CAO888</td>"); document.write("</tr>"); document.write("</table>"); document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><img src='upload/201005141746436426.gif'><br>CAO呀,错误了...<br>[确定]</span>"); document.write(" </div>"); document.write("</div>");}function caoMove(obj) //实现层的拖移{ if(event.button==1) { var caoX=obj.clientLeft; var caoY=obj.clientTop; obj.style.pixelLeft=caoX+(event.x-cao_x); obj.style.pixelTop=caoY+(event.y-cao_y); }}</script><script language=javascript>var mycao=new cao888();mycao.display();</script></body></html>弹出层效果四：<script language="javascript">var alternateFrame=null;//生成的iframevar alternateWin=null;window.alert=showAlert;window.confirm=showConfirm;/*** 人机交互窗口，覆盖自带的*/function alternateWindow(){this.win=null;//生成对话框的窗口对象this.pBody=null;//生成的body容器对象this.pBg=null;this.type="alert";//默认的种类是alertthis.FocusWhere="OK";//焦点在哪个按钮上}/*** 模仿的alert窗口*/function showAlert(info){alternateWin=new alternateWindow();var pBody = alternateWin.init();alternateWin.initAlertBody(pBody,info);alternateWin.type="alert";} /*** 模仿的alert窗口*/function showConfirm(info,ok_func,notok_func,ok_str,not_okstr){alternateWin=new alternateWindow();var pBody = alternateWin.init();alternateWin.initConfirmBody(pBody,info,ok_func,notok_func,ok_str,not_okstr);alternateWin.type="confirm";}/*** 作用：初始基本信息*/alternateWindow.prototype.init=function() {if(alternateFrame==null){alternateFrame=document.createElement("<iframe allowTransparency='true' id='popframe' frameborder=0 marginheight=0 src='about:blank' marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")alternateFrame.style.position="absolute";document.body.appendChild(alternateFrame);}else{alternateFrame.style.visibility="visible";}alternateFrame.style.width=screen.availWidth;alternateFrame.style.height=screen.availHeight;alternateFrame.style.left=document.body.scrollLeft;alternateFrame.style.top=document.body.scrollTop;alternateFrame.name=alternateFrame.uniqueID;this.win=window.frames;this.win.document.write("<body leftmargin=0 topmargin=0 oncontextmenu='self.event.returnValue=false'><div id=popbg></div><div id=popbody></div><div></div></body>");this.win.document.body.style.backgroundColor="transparent";document.body.style.overflow="hidden";this.pBody=this.win.document.body.children;this.pBg=this.win.document.body.children;this.hideAllSelect();this.initBg();return this.pBody;}/*** 作用：初始化背景层 */alternateWindow.prototype.initBg=function(){with(this.pBg.style){position="absolute";left="0";top="0";width="100%";height="100%";visibility="hidden";backgroundColor="#333333";filter="blendTrans(duration=1) alpha(opacity=30)";}this.pBg.filters.blendTrans.apply();this.pBg.style.visibility="visible";this.pBg.filters.blendTrans.play();}/*** 作用：初始化显示层*/alternateWindow.prototype.initAlertBody=function(obj,info){with(obj.style){position="absolute";width="400";height="150";backgroundColor="#ffffff";}obj.style.left=window.document.body.clientWidth/2-200;obj.style.top=window.document.body.clientHeight/3;var str;str ="<table border=0 cellpadding=0 cellspacing=1 bgcolor=#000000 width=100% height=100%><tr height=30>";str+="<td align=left style='color:#000000;font-size:14px;font-weight:bold' bgcolor=#9999ff>[提示]</td></tr>";str+="<tr><td align=center bgcolor=#efefff style='font-size:12px;color:#000000;vertical-align: middle;'>";str+=info+"</td></tr><tr height=30 bgcolor=#efefef><td align=center>" + "<input type='button' value='确定' id='OK'" + " onkeydown='parent.alternateWin.onKeyDown(event,this)'"+ " onclick='parent.alternateWin.closeWin()' style='border:solid 1px #666666;background:#cccccc'>" + "</td></tr></table>";obj.innerHTML=str;this.win.document.body.all.OK.focus();this.FocusWhere="OK";}alternateWindow.prototype.onKeyDown=function(event,obj){ switch(event.keyCode){ case 9: event.keyCode=-1; if(this.type=="confirm"){ if(this.FocusWhere=="OK"){ this.win.document.body.all.NO.focus(); this.FocusWhere="NO"; }else{ this.win.document.body.all.OK.focus(); this.FocusWhere="OK"; } } break; case 13:obj.click();;break; case 27:this.closeWin();break; } }/*** 作用：初始化显示层 conFirm提示层*/alternateWindow.prototype.initConfirmBody=function(obj,info,ok_func,notok_func,ok_str,notok_str){with(obj.style){position="absolute";width="400";height="150";backgroundColor="#ffffff";}if(ok_str==null){ok_str="确定";}if(notok_str==null){notok_str="取消"}obj.style.left=window.document.body.clientWidth/2-200;obj.style.top=window.document.body.clientHeight/3;var str;str="<table border=0 cellpadding=0 cellspacing=1 bgcolor=#000000 width=100% height=100%><tr height=30>";str+="<td align=left style='color:#000000;font-size:14px;font-weight:bold' bgcolor=#9999ff>[询问]</td></tr>";str+="<tr><td align=center bgcolor=#efefff style='font-size:12px;color:#000000;vertical-align: middle;'>";str+=info+"</td></tr><tr height=30 bgcolor=#efefef><td align=center>" +"<input type='button' id='OK'" +" onkeydown='parent.alternateWin.onKeyDown(event,this)'"+" onclick='parent.alternateWin.closeWin();parent."+ok_func+"();' " +" value='"+ok_str+"' style='border:solid 1px #666666;background:#cccccc'>"+"&nbsp;&nbsp;&nbsp;<input type='button' value='"+notok_str+"' id='NO'"+" onkeydown='parent.alternateWin.onKeyDown(event,this)'"+" onclick='parent.alternateWin.closeWin();" +" parent."+notok_func+"();' style='border:solid 1px #666666;background:#cccccc'></td></tr></table>";obj.innerHTML=str;this.win.document.body.all.OK.focus();}/*** 作用：关闭一切*/alternateWindow.prototype.closeWin=function(){alternateFrame.style.visibility="hidden";this.showAllSelect();document.body.style.overflow="auto";}/** * 作用:隐藏所有的select */alternateWindow.prototype.hideAllSelect=function(){ var obj; obj=document.getElementsByTagName("SELECT"); var i; for(i=0;i<obj.length;i++)obj.style.visibility="hidden"; }/*** 显示所有的select*/ alternateWindow.prototype.showAllSelect=function(){ var obj; obj=document.getElementsByTagName("SELECT"); var i; for(i=0;i<obj.length;i++)obj.style.visibility="visible";}</script><script>function clk_yes(){alert("你也同意了我的观点");}function clk_no(){alert("不是你眼花了就是我眼花了！");}</script><body><button >test</button><button >询问框测试</button><p><br/> <br/> <br/>弹出提示的音效文件是：snd.mp3</p><p>如果需要可以替换成其它文件，文件名要设置成snd.mp3</p><p>版本1.2修改：<br/> １、主要修改了滚屏出现的问题</p><p>版本1.1修改：<br/> １、增加了询问框的功能。<br/> ２、增加了音效功能<br/> ３、修饰界面</p><p><b>黑旋风（LCKKING）Mail:lewclear97@163.com QQ:23929003</b><br/>版本1.2修改：<br/>由于最近在做一个东西，需要对界面设计的很友好，所以借用了你的源代码，但是你的作品还有些BUG以及不足，<br/>例如alert之后如果按tab键，焦点会回到主页面上去，这样就不安全了。声音加载的时候，页面会闪一下,<br/>也不是很好，询问框按钮文字windows的没法改，难道自己模拟的也没法改吗？（当然，我把他改了）。<br/>同原作一样，没考虑跨浏览器，以后有机会再改了<br/>对了，你的函数上原来的那些注释(如：日期、作者等)写得那么多，看程序觉得不方便，就删除了，不要介意！<br/>总之谢谢了，为了感谢网友的无私，我也把改了的代码发给大家，希望对大家有所帮助，献丑了！<br/> 1、由于声音加载会使页面跳一下，我不太喜欢，去掉了这个功能，希望不要介意。<br/> 2、改成面向对象设计，这样更加合理一点（个人意见）<br/> 3、扩展了询问框的按钮文字参数设置<br/> 4、覆盖了系统自带的alert和confirm方法，如果大家不喜欢，把头上那2句话删除就可以了<br/> 5、支持键盘操作。</p></body>

页: [1]

六狼论坛's Archiver

四种弹出层带遮罩