Question

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

＆＃13;

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";

＆＃13;

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

＆＃13;

无论我使用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的{{1}}和position:absolute。

JSFiddle

top:0;

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";

Answer 2

在窗口中居中元素的好策略 https://css-tricks.com/centering-percentage-widthheight-elements/
造型摘录：

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

定位警报框

2 个答案: