css 弹出浮动框并可以关闭-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_17228/article/details/81923303

<html>
<head>
<style>
li{list-style:none; margin-left:0px;padding-left:0px;}
ul{padding:0px;}
</style>
<script>
function sAlert(txt)
{
//var eSrc=(document.all)?window.event.srcElement:arguments[1];
var shield = document.createElement("DIV");
var obj = document.getElementById("ehllo");
var datas = new Array('red','white','green','gray');
shield.id = "shield";
shield.style.border = "1px solid #CCCCCC";
shield.style.position = "absolute";
shield.style.left = obj.offsetLeft;
shield.style.top = obj.offsetTop + obj.offsetHeight;
shield.style.width = obj.offsetWidth - 4;
//window.alert(document.body.scrollHeight);
//shield.style.height = document.body.scrollHeight+"px";
shield.style.height = "100";
shield.style.background = "white";
shield.style.textAlign = "left";
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=80)";
shield.style.opacity = 0.8;
//shield.style.border-width=thick;

strHtml = "<a href='javascript:return false;' style='text-decoration: none;color:black; float:right;' onclick='doOk();'>×</a>\n";
shield.innerHTML = strHtml;
ul.style.padding="0px;";
for(key in datas){
var li = document.createElement('li');
//li.style.list-style = "none";
li.innerHTML = "<div>" + datas[key] + "</div>";
ul.appendChild(li);
}
shield.appendChild(ul);
var dialog = document.getElementById("shield");
if(null == dialog) {
document.getElementById("ehllo").parentNode.appendChild(shield);
}else {
document.getElementById("ehllo").parentNode.removeChild(shield);
document.getElementById("ehllo").parentNode.appendChild(shield);
}

this.doOk = function doOk(){
document.getElementById("ehllo").parentNode.removeChild(shield);

}
document.getElementById("do_OK").focus();
}
</script>
</head>
<body >
<div style="margin-left:200px;">
<span style="width:200">                </span>
<input id="ehllo" type=text onclick="sAlert('登陆成功！')" value=登陆> </input>
<div>
</body>
</html>