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

最新推荐文章于 2022-02-25 18:19:43 发布

wd85318

最新推荐文章于 2022-02-25 18:19:43 发布

阅读量96

点赞数

文章标签： C C++ C#

本文链接：https://blog.csdn.net/wd85318/article/details/83705022

版权




<!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>

wd85318

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目用到的简单的弹出层，JS编写

[code="HTML"] 11111111111 function sAlert(txt,button,title) { //var eSrc=(document.all)?window.event.srcElement:arguments[1]; document.body.scrollHeight+ ...
复制链接

扫一扫