Обновление
Я обнаружил фактическую проблему.
В моем коде я ссылаюсь на высоту наложения. Во всех браузерах, кроме IE7, это то же самое, что и размер окна, однако вIE7 это размер документа.
Поэтому я изменил его, указав размер окна, и он работает:).
Итак, мой вопрос: почему IE7 делает это, и я прав, предполагая, что IE7 - фол мяч?здесь?
Оригинал
Я создаю модальный сценарий диалога (для собственного использования).
Код отлично работает в.
Google Chrome, Firefox, IE8 +
Однако в IE7 все позиционирование неверно. Пример
Это значения позиционирования, которые я получаю в IE9 против IE7 (имейте в виду, что значения меньше, чем в обычном окне, так как у меня открыты инструменты разработчика.)
IE7
слева: 367 пикселей;
вверху: 1409 пикселей;
IE9 слева: 369,5 пикселя;
сверху: 122,5 пикселя;
Что мне нужно сделать, чтобы это исправить?
CSS
Обратите внимание, что этот CSS имеет некоторые странные правила, такие кактег body только для целей тестирования.
Обратите внимание, что я знаю, что rgba, box-shadow и т. д. не работают в браузерах, не поддерживающих css3,
Я исправлю это, когда диалог будет работать правильно.
body {
padding: 0;
margin: 0;
color: #fff;
height: 3000px;
}
#modal-overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: none;
}
#modal-dialog {
display: none;
background: #000;
border-bottom: 1px solid #141414;
border-right: 1px solid #141414;
border-top: 1px solid #121212;
border-left: 1px solid #121212;
position: absolute;
z-index: 99999;
-webkit-box-shadow: 3px 3px 10px #000000;
-moz-box-shadow: 3px 3px 10px #000000;
box-shadow: 3px 3px 10px #000000;
}
#modal-element{
margin-top: 16px;
overflow-x: hidden;
overflow-y: auto;
}
#test, #test2 {
display: none;
width: 800px;
padding: 5px;
}
#test2 {
width: 600px;
}
#modal-close {
position: absolute;
background-image: url('close.png');
width: 16px;
height: 16px;
top: -5px;
right: -5px;
cursor: pointer;
}
#modal-title {
position: absolute;
top: -10px;
left: 5px;
color: #fff;
font-size: 16px;
font-weight: bold;
}
#modal-close:hover {
-webkit-box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
-moz-box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
}
#modal-close:active {
-webkit-box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
-moz-box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
}
Javascript
(function($) {
$.widget("hailwood.modal", {
options: {
width: null,
height: null,
title: '',
closeOnEscape: true,
modal: true
},
self: {},
_create: function() {
//setup our elements
var self = this;
this.body = $('body');
this.content = self.element;
this.place = $('<div id="modal-place" style="display:none;"></div>');
this.dialog = $('<div id="modal-dialog"><div id="modal-element"></div></div>');
this.stuff = $('#modal-element', this.dialog);
this.overlay = $('<div id="modal-overlay"></div>');
this.title = $('<div id="modal-title">' + this.options.title + '</div>');
this.closeButton = $('<div id="modal-close"></div>');
//shove the placeholder element in
this.content.after(this.place);
//capture width and height
this.orig_width = (this.options.width === null ? this.content.outerWidth(true) : this.options.width);
this.orig_height = (this.options.height === null ? this.content.outerHeight(true) : this.options.height);
//insert elements into the dom
this.body.prepend(
this.overlay.prepend(
this.dialog.prepend(
this.stuff.prepend(this.content)
)
.prepend(this.closeButton)
.prepend(this.title)));
//make the content visible
this.content.show();
this.refresh(this);
//show the overlay and dialog
this.overlay.fadeIn('medium', function(){
self.dialog.show('slide', {direction: 'down'}, 'medium');
});
//setup the resize handler
$(window).resize(function() {
self.refresh();
});
this.closeButton.click(function() {
self.close();
});
if (this.options.closeOnEscape)
$(document).bind('keyup.hailwood.modal', function(e){
if (e.keyCode == 27)
self.close();
});
//setup close handler
this.self = this;
},
close: function() {
this.destroy();
},
refresh: function() {
var self = this;
if (self.overlay.length == 0 || self.dialog.length == 0)
return false;
self.height = self.orig_height;
self.width = self.orig_width;
//make an adjustment to the height if it is bigger than the overlay
var s1 = self.height;
self.height = (self.height > self.overlay.height() ? self.overlay.height() - 20 : self.height);
var diff = (s1 === self.height ? 0 : 16);
//set the dialog height and width
self.dialog.height(self.height);
self.dialog.width(self.width);
self.stuff.height(self.height -diff);
self.stuff.width(self.width);
//position the dialog
self.left = (self.overlay.width() / 2) - (self.dialog.outerWidth() / 2);
self.top = (self.overlay.height() / 2) - (self.dialog.outerHeight() / 2);
self.dialog.css({left : self.left, top : self.top});
},
destroy: function() {
var self = this;
self.dialog.hide('slide', {direction: 'down'} ,'medium', function() {
self.place.after(self.content.hide());
self.place.remove();
self.dialog.remove();
$(window).unbind('.hailwood.modal');
$(document).unbind('hailwood.modal');
self.overlay.fadeOut('medium', function() {
self.overlay.remove();
});
});
$.Widget.prototype.destroy.call(this);
}
});
/*
* Remember what I said in the first comment?
* we pass in jQuery here so it gets aliased as $
*/
})(jQuery);