四种弹出层带遮罩

PHPABC CSS 614 次浏览 , 没有评论

弹出层效果一:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title> 弹出层效果</title>
<style type=”text/css”>
<!–
html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {
background-color: #FFCC66;
border: 1px solid #f00;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

margin-top:0px;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
document.compatMode==’CSS1Compat’) ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight – this.clientHeight)/2);/*IE5 IE5.5*/

}
.bg {
background-color: #666;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
document.compatMode==’CSS1Compat’) ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight – this.clientHeight)/2);/*IE5 IE5.5*/

}
–>
</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” style=”display:none;”>启己记录<br/>vvwww.com<br/>
<a href=”javascript:closeDiv()”>关闭窗口</a></div>
<div id=”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”>
<!–
function cry(){
alert(“你可以拖动我吗?”)
}
//–>
</script>
<script language=”javascript”>
<!–
window.alert = function(txt)
{
var shield = document.createElement(“DIV”);
shield.id = “shield”;
shield.style.position = “absolute”;
shield.style.left = “0px”;
shield.style.top = “0px”;
shield.style.width = “100%”;
shield.style.height = “100%”;
//shield.style.height = document.body.scrollHeight+”px”;
shield.style.background = “#000”;
shield.style.textAlign = “center”;
shield.style.zIndex = “10000”;
shield.style.filter = “alpha(opacity=0)”;
var alertFram = document.createElement(“DIV”);
alertFram.id=”alertFram”;
alertFram.style.position = “absolute”;
//负边界居中法,相对于shield层的顶部时
//alertFram.style.left = “50%”;
//alertFram.style.top = “50%”;
//alertFram.style.marginLeft = “-125px”;
//alertFram.style.marginTop = “-75px”;
//负边界居中法,相对于 shield层的底部时
alertFram.style.right = “50%”;
alertFram.style.bottom = “50%”;
alertFram.style.marginRight = “-125px”;
alertFram.style.marginBottom = “-75px”;
alertFram.style.width = “250px”;
alertFram.style.height = “150px”;
alertFram.style.background = “#000”;
alertFram.style.textAlign = “center”;
alertFram.style.lineHeight = “150px”;
alertFram.style.zIndex = “10002”;
strHtml = “<ul style=\”list-style:none;margin:0px;padding:0px;width:100%\”>\n”;
strHtml += “<li onmousedown=\”oMove(parentNode.parentNode);\” title=\”移動\” style=\”cursor:move;background:#002F9C;text-align:left;padding-left:5px;font-size:14px;font-weight:bold;color: #FFFFFF;height:25px;line-height:25px;border-left:1px solid #FFFFFF;border-top:1px solid #FFFFFF;border-right:1px solid #FFFFFF;\”>[提示……]</li>\n”;
strHtml += “<li style=\”background:#5A7EDC;text-align:center;font-size:12px;color: #FFFFFF;height:120px;line-height:120px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;\”>”+txt+”</li>\n”;
strHtml += “<li style=\”background:#002F9C;text-align:center;font-weight:bold;height:25px;line-height:25px; border-left:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;border-right:1px solid #FFFFFF;\”><input type=button value=’ 确定 ‘ onclick=\”remove()\”></li>\n”;
strHtml += “</ul>\n”;
alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);
var c = 0;
this.doAlpha = function(){
if (c++ > 50){clearInterval(ad);return 0;}
shield.style.filter = “alpha(opacity=”+c+”);”;
}
this.remove=function(){
alertFram.innerHTML=””;
shield.style.filter = “”;
shield.id = “”;
shield.style.position = “”;
shield.style.left = “”;
shield.style.top = “”;
shield.style.width = “”;
shield.style.height =””;
shield.style.background = “”;
shield.style.textAlign = “”;
shield.style.zIndex = “”;
shield.style.filter = “”;
alertFram.id=””;
alertFram.style.position = “”;
alertFram.style.left = “”;
alertFram.style.top = “”;
alertFram.style.marginLeft = “”;
alertFram.style.marginTop = “”;
alertFram.style.width = “”;
alertFram.style.height = “”;
alertFram.style.background = “”;
alertFram.style.textAlign = “”;
alertFram.style.lineHeight = “”;
alertFram.style.zIndex = “”;
}
var ad = setInterval(“doAlpha()”,10);
alertFram.focus();
document.body.onselectstart = function(){return false;};
}
function oMove(obj){
var otop,oleft;
otop = event.y – obj.offsetTop;
oleft = event.x – obj.offsetLeft;
obj.setCapture();
obj.onmousemove = function()
{
obj.style.left = event.x – oleft;
obj.style.top = event.y – otop;
}
obj.onmouseup = function()
{
obj.onmousemove = null;
obj.style.filter = null;
obj.releaseCapture();
}
}
//–>
</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;//生成的iframe
var alternateWin=null;
window.alert=showAlert;
window.confirm=showConfirm;
/**
* 人机交互窗口,覆盖自带的
*/
function alternateWindow(){
this.win=null;//生成 对话框的窗口对象
this.pBody=null;//生成的body容器对象
this.pBg=null;
this.type=”alert”; //默认的种类是alert
this.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[alternateFrame.name];
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[1];
this.pBg=this.win.document.body.children[0];
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[i].style.visibility=”hidden”;
}
/**
* 显示所有的select
*/
alternateWindow.prototype.showAllSelect=function(){
var obj;
obj=document.getElementsByTagName(“SELECT”);
var i;
for(i=0;i<obj.length;i++)
obj[i].style.visibility=”visible”;
}
</script>
<!—————————————————————->
<script>
function clk_yes(){
alert(“你也同意了我的观点”);
}
function clk_no(){
alert(” 不是你眼花了就是我眼花了!”);
}
</script>
<body>
<button onClick=”alert(‘我觉得今天天气真的很不错!’)”>test</button>
<button onClick=”confirm(‘今天天气真的很好啊,难道不是么?’,’clk_yes’,’clk_no’,’就算是吧’,’乱讲’)”> 询问框测试</button>

<p><br/>
<br/>
<br/>
弹出提示的音效文件是:snd.mp3</p>
<p>如果需要可以替换成其它文件,文件 名要设置成snd.mp3</p>
<p>版本1.2修改:<br/>
1、主要修改了滚屏出现的问题
</p>
<p>版本1.1修改:<br/>
1、增加了询问框的功能。<br/>
2、增加了音效功能<br/>
3、修饰界面</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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go