Горизонтально и вертикально Центр Modal Div IE Проблема

Я пытаюсь горизонтально и вертикально центрировать модальное окно внутри div. Я хочу, чтобы он был совместим с браузером. Вы можете видеть на картинке ниже, что при изменении размера IE8, нажмите кнопку «show modal», которая отобразится не точно по горизонтали. Это не похоже на Chrome. Есть предположения? Как вы, ребята, это сделаете?Горизонтально и вертикально Центр Modal Div IE Проблема

<html> 
<head> 
<title>test</title> 
<style type="text/css"> 
    * 
    { 
     margin: 0px; 
     padding: 0px; 
    } 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script type="text/javascript"> 

    $(function() { 

     $('#modal').click(function() { 

      // overlay 
      $('<div id="overlay" />').css({ 
       position: 'absolute', 
       top: 0, 
       left: 0, 
       width: '100%', 
       height: '100%', 
       backgroundColor: 'black', 
       opacity: 0 
      }).appendTo('body'); 

      $('<div id="datamodal" />').css({ 
       backgroundColor: '#FFFFFF', 
       border: '10px solid #999', 
       height: '200px', 
       width: '600px', 
       position: 'absolute', 
       top: '50%', 
       left: '50%', 
       marginTop: '-120px', 
       marginLeft: '-320px', 
       color: '#111111', 
       fontWeight: 'bold', 
       padding: '10px', 
       display: 'none' 
      }).append('<input type="text" />').appendTo('#overlay'); 

      $('#overlay').fadeTo(300, 0.7); 
      $('#datamodal').fadeIn(300); 
     }); 

    }); 

</script> 

</head> 
<body> 
    <input id="modal" type="button" value="show modal" /> 
</body> 
</html>

alt text http://ajondeck.net/temp/resize.png

источник

2010-04-13 aherrick

возможно дубликат http://stackoverflow.com/questions/210717/what-is-the-best-way-to-center-a-div-on-the-screen-using-jquery –

После возни с CSS в течение длительного времени, и чесать голову, я заметил, что этот документ не имеет DOCTYPE. Я добавил Strict DOCTYPE, и вдруг IE8 начал вести себя с остальной частью вашего кода без изменений.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

источник

2010-04-13 20:50:28

Вы должны вычислить позицию, основанную на окне и размера диалога и установить стиль с помощью JavaScript.

Пример из: Using jQuery to center a DIV on the screen

jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    this.css("top", ($(window).height() - this.height())/2+$(window).scrollTop() + "px"); 
    this.css("left", ($(window).width() - this.width())/2+$(window).scrollLeft() + "px"); 
    return this; 
}

источник

2010-04-13 20:04:09

Ok ... как именно это делается? – aherrick

Смотрите мои правки. :) –

Горизонтально и вертикально Центр Modal Div IE Проблема

ответ

Смежные вопросы