项目用到的简略的弹出层，JS编写-JavaSript-爱易网页

项目用到的简略的弹出层，JS编写

日期：2014-05-16　浏览次数：20297 次

项目用到的简单的弹出层，JS编写



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" lang="zh_CN" xml:lang="zh_CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
<title>11111111111</title>

	
	<script type="text/javascript" >

    function sAlert(txt,button,title)  
    {  
    //var eSrc=(document.all)?window.event.srcElement:arguments[1]; document.body.scrollHeight+  
   
//遮盖层
   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 = "1000px";  
    shield.style.background = "#333";  
    shield.style.textAlign = "center";  
//zIndex=10000
    shield.style.zIndex = "10000";  
    shield.style.filter = "alpha(opacity=0)";  
    shield.style.opacity = 0;  
    //弹出层
    var alertFram = document.createElement("DIV");  
    alertFram.id="alertFram";  
    alertFram.style.position = "absolute";  
    alertFram.style.left = "60%";  
    alertFram.style.top = "40%";  
    alertFram.style.marginLeft = "-225px" ;  
    alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";  
    alertFram.style.width = "200px";  
    alertFram.style.height = "175px";  
    alertFram.style.background = "#ccc";  
    alertFram.style.textAlign = "center";  
    alertFram.style.lineHeight = "150px"; 
//弹出层的zIndex=10001 
    alertFram.style.zIndex = "10001";  
      
    strHtml = "<ul style=\"list-style:none;margin:0px;padding:0 0 0 0px;width:100%\">\n";  
    strHtml += " <li style=\"background:#4477BB;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #4477BB;\">title</li>\n";  
    strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #4477BB;border-right:1px solid #4477BB;\">"+txt+"</li>\n";  
    strHtml += " <li style=\"background:#4477BB;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #4477BB;\"><input type=\"button\" value=\" \" id=\"do_OK\" onclick=\"doOk()\" /></li>\n";  
	
    strHtml += "</ul>\n";  
    
    alertFram.innerHTML = strHtml;  
    document.body.appendChild(alertFram);  
    document.body.appendChild(shield);    
    document.getElementById("do_OK").value=button;
    //设置滤镜效果
    this.setOpacity = function(obj,opacity){  
    if(opacity>=1)opacity=opacity/100;  
    try{ obj.style.opacity=opacity; }catch(e){}  
    try{  
    if(obj.filters.length>0&&obj.filters("alpha")){  
    obj.filters("alpha").opacity=opacity*150;  
    }else{  
    obj.style.filter="alpha(opacity=\""+(opacity*150)+"\")";  
    }  
    }catch(e){}  
    }  
    var c = 0;  
    this.doAlpha = function(){  
    if (++c > 20){clearInterval(ad);return 0;}  
    setOpacity(shield,c);  
    }  

    var ad = setInterval("doAlpha()",1);  
    this.doOk = function(){  
    document.body.removeChild(alertFram);  
    document.body.removeChild(shield);  
    document.body.onselectstart = function(){return true;}  
    document.body.oncontextmenu = function(){return true;}  
    }  
    document.getElementById("do_OK").focus();  
    document.body.onselectstart = function(){return false;}  
    document.body.oncontextmenu = function(){return false;}  
    }       
      
    </script>  
	</script>
    
</head>
<body >



	 <input type="button" value="go" onclick="sAlert('go','button','title');" />   
    
</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

项目用到的简略的弹出层，JS编写

相关资料更多>

推荐阅读更多>