Оповещение о позиционировании

Question

У меня есть окно пользовательского предупреждения, которое отображается при щелчке строки в таблице. Когда у меня несколько строк, я прокручиваю вниз и щелкаю по строке. Поле предупреждения отображается только сверху.

var d = document; 
 
\t var c_obj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); 
 
\t c_obj.id = "contain"; 
 
\t c_obj.style.height = d.documentElement.scrollHeight + "px"; 
 
\t var alertObj = c_obj.appendChild(d.createElement("div")); 
 
\t alertObj.id = "alert"; 
 
\t if (d.all && !window.opera) 
 
\t alertObj.style.top = document.documentElement.scrollTop + "px"; 
 
\t alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px"; 
 
\t alertObj.style.visiblity = "visible"; 
 
\t var h3 = alertObj.appendChild(d.createElement("h3")); 
 
\t h3.appendChild(d.createTextNode(name)); 
 
\t var msg = alertObj.appendChild(d.createElement("p")); 
 
\t msg.innerHTML = "Links : " +Links+'<br>'; 
 
\t var btn = alertObj.appendChild(d.createElement("a")); 
 
\t btn.id = "close"; 
 
\t btn.appendChild(d.createTextNode('ok')); 
 
\t btn.focus(); 
 
\t btn.onclick = function() { 
 
\t c_obj.parentNode.removeChild(c_obj); 
 
\t }; 
 
\t alertObj.style.display = "block"; 
 
\t

#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 a значение 0 с указанием поля 0 с должностями width и height означает, что оно будет находиться в центре экрана.

Также удалите containposition:absolute и top:0;.

JSFiddle

var d = document; 
 
\t var c_obj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div")); 
 
\t c_obj.id = "contain"; 
 
\t c_obj.style.height = d.documentElement.scrollHeight + "px"; 
 
\t var alertObj = c_obj.appendChild(d.createElement("div")); 
 
\t alertObj.id = "alert"; 
 
\t if (d.all && !window.opera) 
 
\t alertObj.style.top = document.documentElement.scrollTop + "px"; 
 
\t alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px"; 
 
\t alertObj.style.visiblity = "visible"; 
 
\t var h3 = alertObj.appendChild(d.createElement("h3")); 
 
\t h3.appendChild(d.createTextNode(name)); 
 
\t var msg = alertObj.appendChild(d.createElement("p")); 
 
\t msg.innerHTML = "Links : " +Links+'<br>'; 
 
\t var btn = alertObj.appendChild(d.createElement("a")); 
 
\t btn.id = "close"; 
 
\t btn.appendChild(d.createTextNode('ok')); 
 
\t btn.focus(); 
 
\t btn.onclick = function() { 
 
\t c_obj.parentNode.removeChild(c_obj); 
 
\t }; 
 
\t 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;}

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