Собственно была задача сделать модальное окно, в которое подгружается контент через AJAX. С этим проблем у меня не было.
Сделал/сверстал всё как надо и всё хорошо работает в firefox (у меня щас 8 версия) и Опере(10), но когда я посмотрел результат в Хроме и Осле, то был немного опечален...
Осел-7 ваще скрипт не воспроизводит, но это еще пол беды а в 8 Осле и Хроме есть некий баг, кой я с вашей помощью надеюсь устранить
собственно код JQuery:
CODE (javascript):
скопировать код в буфер обмена
скопировать код в буфер обмена
- $('.simple_preview').children('p').children('a').click(function(){
- var id = $(this).parent('p').attr('class');
- $.post('/includes/jprocessing.php',{'get_modal_id':id},function(data){
- var content = '<div onclick="close_modal_form();" id="modal_back"></div>'+
- '<div id="modal_form">'+
- '<div id="modal_form_header"><span onclick="close_modal_form();">ЗАКРЫТЬ</span></div>'+
- '<div></div>'+
- '</div>';
- //добавляем модальную форму к документу
- $('body').append(content);
- //загружаем данные в форму
- $('#modal_form').children('#modal_form_header').next('div').append(data);
- //считываем получившуююся ширину формы
- var modal_width = $('#modal_form').css('width');
- modal_width = parseInt(modal_width);
- //считываем получившуююся высоту формы
- var modal_height = $('#modal_form').css('height');
- modal_height = parseInt(modal_height);
- //считываем получившуююся ширину окна
- var body_width = $('body').css('width');
- body_width = parseInt(body_width);
- //считываем получившуююся высоту окна
- var body_height = $('body').css('height');
- body_height = parseInt(body_height);
- //рассчитываем левое и верхнее положение формы относительно окна
- var left = Math.ceil((body_width-modal_width)/2);
- var left_center = Math.ceil(body_width/2);
- var top = Math.ceil((body_height-modal_height)/2);
- var top_center = Math.ceil(body_height/2);
- //отображаем форму
- $('#modal_form').css({
- 'minWidth':0,'minHeight':0,
- 'left':left_center,
- 'top':top_center,
- 'width':'0',
- 'height':'0',
- 'display':'block'})
- .animate({
- 'width': modal_width+'px',
- 'height': modal_height+'px',
- 'left': left+'px',
- 'top':(top-15)+'px',
- },400);
- });
- });