Я пытаюсь центрировать модальное окно по горизонтали и вертикали внутри div. Я хочу, чтобы он был совместим с разными браузерами. Из рисунка ниже видно, что когда я изменяю размер IE8, затем нажимаю кнопку «Показать модальные», она отображается не совсем горизонтально по центру. Это не похоже на проблему с Chrome. Какие-нибудь мысли? Как бы вы, ребята, сделали это?
<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>
альтернативный текст http://ajondeck.net/temp/resize.png