css 彈出浮動框 並可以關閉

<copy from  .... I forget it>

<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;' οnclick='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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input id="ehllo" type=text οnclick="sAlert('登陸成功!')" value=登陸> </input>
<div>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章