Простые модальные проблемы в Internet Explorer

Question

Имея раздражающую проблему с простомодульными и несколькими браузерами. Я собрал образец, который иллюстрирует проблему. Когда он запускается в Firefox или Chrome, он отлично работает. Это простая ссылка, которая при нажатии вызывает простой диалог. Если вы нажмете кнопку «Да», появится всплывающее предупреждение, и если вы нажмете «Нет», диалог закроется, ничего не сделав. Проблемы возникают при работе в Internet Explorer. В версии 9 диалоговое окно появляется под содержимым страницы и с левой стороны, когда оно должно появляться в середине страницы. Он также изменяет курсор на ожидание, а затем зависает. В версии 8 диалоговое окно появляется в том же месте, но кнопки можно щелкнуть, а функции диалога - это просто не в нужном месте. Я просмотрел все css и не могу понять, в чем проблема. Любая помощь будет оценена по достоинству. Вот код страницы и CSS:

HTML разметки

<div id='container'> 
    <div id='content'> 
     <div id='confirm-dialog'> 
     <h1>Dialog Test</h1> 
     <a href="#" class='confirm'>Click Me for Dialog</a><br /> 
    </div> 
    <div id='confirm'> 
     <div class='header'><span>Dialog Window</span></div> 
     <div class='message'> 
      <p>This is a dialog.</p> 
      <p>There are many like it, but this one is mine.</p> 
      <p>Got it?</p> 
     </div> 
     <div class='buttons'> 
      <div class='no simplemodal-close'>No</div> 
      <div class='yes'>Yes</div> 
     </div> 
    </div> 
</div> 

JS разметки:

jQuery(function ($) { 
    $('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) { 
     e.preventDefault(); 

     confirm("", function() { 
      alert("You clicked YES"); 
     }); 
    }); 
}); 

function confirm(message, callback) { 
    $('#confirm').modal({ 
     closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>", 
     position: ["20%",], 
     overlayId: 'confirm-overlay', 
     containerId: 'confirm-container', 
     containerCss: { 
          height: 250, 
          width: 400, 
          backgroundColor: '#fff', 
          border: '3px solid #ccc' 
         }, 

     onShow: function (dialog) { 
      var modal = this; 

      $('.message', dialog.data[0]).append(message); 

      $('.yes', dialog.data[0]).click(function() { 
       if ($.isFunction(callback)) { 
        callback.apply(); 
       } 
       modal.close(); 
      }); 
     } 
    }); 
} 

CSS разметки:

#confirm {display:none;} 

/* Overlay */ 
#confirm-overlay {background-color:#eee; cursor:wait;} 

/* Container */ 
#confirm-container {height:140px; width:420px; font: 16px/22px 'Trebuchet MS', Verdana, Arial; text- align:left; background:#fff; border:2px solid #0F1F91;} 
/* solid #336699; */ 
#confirm-container .header {height:30px; line-height:30px; width:100%;  background:url(../img/confirm/header.gif) repeat-x; color:#fff; font-weight:bold;} 
#confirm-container .header span {padding-left:8px;} 
#confirm-container .message {color:#333; font-size:14px; margin:0; padding:12px 4px 12px 8px;} 
#confirm-container .buttons {line-height:26px; width:160px; float:right; padding:10px 8px 0;} 
#confirm-container .buttons div {float:right; margin-left:4px; height:26px; width:40px; color:#666; font-weight:bold; text-align:center; background:url(../img/confirm/button.gif) repeat-x; border:1px solid #bbb; cursor:pointer;} 
#confirm-container a.modal-close {margin-top:3px} 
#confirm-container a.modal-close:link, 
#confirm-container a.modal-close:active, 
#confirm-container a.modal-close:visited {text-decoration:none; font-weight:bold; position:absolute; right:10px; top:2px; color:#fff;} 
#confirm-container a.modal-close:hover {color:#ccc;} 

Answer 1

Найден ответ в другом потоке - несмотря на поиск, прежде чем я отправил сообщение, этот поток не появился в моем первоначальном поиске.

Исправление было изменить следующее:

containerCss: { 
    height: 250, 
    width: 400, 
    backgroundColor: '#fff', 
    border: '3px solid #ccc', 
}, 

Для этого:

containerCss: { 
    height: 250, 
    width: 400, 
    backgroundColor: '#fff', 
    border: '3px solid #ccc', 
    position: 'absolute', top: '0px' 
},