div 层 + 背景变半透明 + 自动消失

最新推荐文章于 2021-06-02 23:41:16 发布

weixin_34032621

最新推荐文章于 2021-06-02 23:41:16 发布

阅读量168

点赞数

文章标签： xhtml javascript ViewUI

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>无标题文档</title>
<script language="javascript">
function alertWin(title, msg, w, h)
{
var bordercolor = "#FFFFFF"; // 提示窗口的边框颜色
var bgcolor = "#000000"; // 提示内容的背景色

var nWidth = document.documentElement.clientWidth;
var nHeight = document.documentElement.clientHeight;

var objDiv = document.createElement("div");
objDiv.style.cssText = "position:absolute;left:0px;top:0px;width:" +
                               nWidth +
                               "px;height:" +
                               Math.max(document.body.clientHeight, nHeight) +
                               "px;filter:Alpha(Opacity=50);opacity:0.3;background-color:#000000;z-index:101;";

document.body.appendChild(objDiv);

var objMsg = document.createElement("div");
objMsg.style.cssText = "position:absolute;font:11px '宋体';top:" + (nHeight-h) / 2 + "px;" +
                               "left:" + (nWidth - w) / 2 +
                               "px;width:"+w+"px;height:" + h +
                               "px;px;filter:Alpha(Opacity=60);text-align:center;border:1px solid " + bordercolor + ";background-color:" + bgcolor + ";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild(objMsg);

        objMsg.innerHTML = "<font color=#FFFFFF><h2 align=absmiddle vertical-align=center><pre>" + msg + "</pre></h2></font>";

setTimeout( function(){ document.body.removeChild(objDiv); document.body.removeChild(objMsg); }, 2000);
}
</script>
</head>
<body>
<input type="button" value="点这里" οnclick="alertWin('标题','这里是内容',300,200);" />
</body>
</html>