Javascript 定位报警箱

我有一个自定义警报框，单击表中的一行即可显示该框。当我有多行时，我向下滚动并单击一行。警报框仅显示在顶部

var d=文档；
var c_obj=d.getElementsByTagName（“body”）[0].appendChild（d.createElement（“div”）；
c_obj.id=“包含”；
c_obj.style.height=d.documentElement.scrollHeight+“px”；
var alertObj=c_obj.appendChild（d.createElement（“div”））；
alertObj.id=“警报”；
if（d.all&&！window.opera）
alertObj.style.top=document.documentElement.scrollTop+“px”；
alertObj.style.left=（d.documentElement.scrollWidth-alertObj.offsetWidth）/2+“px”；
alertObj.style.visiblity=“可见”；
var h3=alertObj.appendChild（d.createElement（“h3”）；
h3.appendChild（d.createTextNode（name））；
var msg=alertObj.appendChild（d.createElement（“p”））；
msg.innerHTML=“链接：“+Links+”
”；
var btn=alertObj.appendChild（d.createElement（“a”）；
btn.id=“关闭”；
btn.appendChild（d.createTextNode（'ok'））；
btn.focus（）；
btn.onclick=函数（）{
c_obj.parentNode.removeChild（c_obj）；
};
alertObj.style.display=“块”；

#包含{位置：绝对；顶部：0；}
#警报{背景：#CCE6FF；填充：10px；宽度：600px；高度：250px；边距：300px；边框半径：15px；边框：1px实心#a1a1a1a1；溢出-y:auto；}
#关闭{padding:5px；background:blue；color:white；border radius:5px；cursor:pointer；}

在css中，您可以使用

#alert

类：

#alert{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  width:600px;
  height:250px;
  border:1px solid #a1a1a1;
  margin:auto;
  overflow-y:auto;
}

添加

位置：绝对

，给

顶部

，

左侧

，

右侧

和

底部

一个值

0

，给

宽度和
高度的边距
0
，意味着它将位于屏幕中央

同时删除
包含
的
位置：绝对
和
顶部：0



var d=文档；
var c_obj=d.getElementsByTagName（“body”）[0].appendChild（d.createElement（“div”）；
c_obj.id=“包含”；
c_obj.style.height=d.documentElement.scrollHeight+“px”；
var alertObj=c_obj.appendChild（d.createElement（“div”））；
alertObj.id=“警报”；
if（d.all&&！window.opera）
alertObj.style.top=document.documentElement.scrollTop+“px”；
alertObj.style.left=（d.documentElement.scrollWidth-alertObj.offsetWidth）/2+“px”；
alertObj.style.visiblity=“可见”；
var h3=alertObj.appendChild（d.createElement（“h3”）；
h3.appendChild（d.createTextNode（name））；
var msg=alertObj.appendChild（d.createElement（“p”））；
msg.innerHTML=“链接：“+Links+”
”；
var btn=alertObj.appendChild（d.createElement（“a”）；
btn.id=“关闭”；
btn.appendChild（d.createTextNode（'ok'））；
btn.focus（）；
btn.onclick=函数（）{
c_obj.parentNode.removeChild（c_obj）；
};
alertObj.style.display=“块”
#警报{位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；边距：0；宽度：600px；高度：250px；背景：CCE6FF；边框：1px实心#a1a1a1；边距：自动；溢出-y：自动；}
#关闭{padding:5px；background:blue；color:white；border radius:5px；cursor:pointer；}
在窗口中将元素居中的好策略


样式摘录：

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 40%;
  height: 50%;

  padding: 20px;  
  background: red;
  color: white;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}