javascript - 定位警报框

Question

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

var d = document;
	 var c_obj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
	 c_obj.id = "contain";
	 c_obj.style.height = d.documentElement.scrollHeight + "px";
	 var alertObj = c_obj.appendChild(d.createElement("div"));
	  alertObj.id = "alert";
	  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 = "visible";
	 var h3 = alertObj.appendChild(d.createElement("h3"));
	  h3.appendChild(d.createTextNode(name));
	 var msg = alertObj.appendChild(d.createElement("p"));
	  msg.innerHTML = "Links : " +Links+'<br>';
	  var btn = alertObj.appendChild(d.createElement("a"));
	  btn.id = "close";
	  btn.appendChild(d.createTextNode('ok'));
	  btn.focus();
	  btn.onclick = function() {
	  c_obj.parentNode.removeChild(c_obj);
	  };
	  alertObj.style.display = "block";
	  

#contain{position:absolute;top:0;}
#alert{background:#CCE6FF;padding:10px;width:600px;height:250px;margin:300px;border-radius:15px;border:1px solid #a1a1a1;overflow-y: auto;}
#close{padding:5px; background:blue;color:white;border-radius:5px;cursor: pointer;}

如何使用 CSS 和 JS 在页面中央显示警告框，无论点击哪一行

Answer 1

在 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;
}

添加position:absolute，给出top、left、right和bottom > 值为 0 并赋予边距 0 以及 width 和 height 意味着它将位于中心屏幕的。

同时删除 contain 的 position:absolute 和 top:0;。

JSFiddle

var d = document;
	 var c_obj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
	 c_obj.id = "contain";
	 c_obj.style.height = d.documentElement.scrollHeight + "px";
	 var alertObj = c_obj.appendChild(d.createElement("div"));
	  alertObj.id = "alert";
	  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 = "visible";
	 var h3 = alertObj.appendChild(d.createElement("h3"));
	  h3.appendChild(d.createTextNode(name));
	 var msg = alertObj.appendChild(d.createElement("p"));
	  msg.innerHTML = "Links : " +Links+'<br>';
	  var btn = alertObj.appendChild(d.createElement("a"));
	  btn.id = "close";
	  btn.appendChild(d.createTextNode('ok'));
	  btn.focus();
	  btn.onclick = function() {
	  c_obj.parentNode.removeChild(c_obj);
	  };
	  alertObj.style.display = "block";

#alert{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;width:600px;height:250px;background:#CCE6FF;border:1px solid #a1a1a1;margin:auto;overflow-y:auto;}
#close{padding:5px; background:blue;color:white;border-radius:5px;cursor: pointer;}