Некоректно отображается модальное окно с формой - JavaScript - Ответ 5174610

<style>
 
#prompt-form {
  display: inline-block;
  padding: 5px 5px 5px 70px;
  width: 200px;
  border: 1px solid black;
  background: white;
  vertical-align: middle;
}
 
#prompt-form-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  width: 100%;
  height: 100%;
  text-align: center;
}
 
#prompt-form-container:before {
  display: inline-block;
  height: 100%;
  content: '';
  vertical-align: middle;
}
 
#cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
 
#prompt-form input[name="text"] {
  display: block;
  margin: 5px;
  width: 180px;
}
</style>
 
 
 <table border='1' cellpadding='4' width='300px'> 
       
          <tr>
          <input type="button" value="Нажмите для показа формы ввода" id="show-button">
          <div id="prompt-form-container">
  <form id="prompt-form">
    <div id="prompt-message"></div>
    <input name="text" type="text">
    <input type="submit" value="Ок">
    <input type="button" name="cancel" value="Отмена">
  </form>
</div>
 
<script>
 
/* Показать полупрозрачный DIV, затеняющий всю страницу 
(а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная) */
function showCover() {
  var coverDiv = document.createElement('div');
  coverDiv.id = 'cover-div';
  document.body.appendChild(coverDiv);
}
 
function hideCover() {
  document.body.removeChild(document.getElementById('cover-div'));
}
 
function showPrompt(text, callback) {
  showCover();
  var form = document.getElementById('prompt-form');
  var container = document.getElementById('prompt-form-container');
  document.getElementById('prompt-message').innerHTML = text;
  form.elements.text.value = '';
 
  function complete(value) {
    hideCover();
    container.style.display = 'none';
    document.onkeydown = null;
    callback(value);
  }
 
  form.onsubmit = function() {
    var value = form.elements.text.value;
    if (value == '') return false; // игнорировать пустой submit
 
    complete(value);
    return false;
  };
 
  form.elements.cancel.onclick = function() {
    complete(null);
  };
 
  document.onkeydown = function(e) {
    e = e || event;
    if (e.keyCode == 27) { // escape
 
    }
  };
 
  var lastElem = form.elements[form.elements.length-1];      
  var firstElem = form.elements[0];
          
  lastElem.onkeydown = function(e) {
    if (e.keyCode == 9 && !e.shiftKey) {
      firstElem.focus();
      return false;
    }
  };
  
  firstElem.onkeydown = function(e) {
    if (e.keyCode == 9 && e.shiftKey) {
      lastElem.focus();
      return false;
    }
  };
    
 
  container.style.display = 'block';
  form.elements.text.focus();
}
 
document.getElementById('show-button').onclick = function() {
  showPrompt("Введите что-нибудь<br>...умное :)", function(value) {
    alert("Вы ввели: " + value);
  });
};
 
</script>  
      <td  style="background-color: #F9F5AE;"><a href="#"><?php echo htmlspecialchars($row['FirstName']);   echo " ".               htmlspecialchars($row['LastName']); ?></a></td></tr>
      </table>