Доброго времени суток, уважаемые форумчане!
Собственно была задача сделать модальное окно, в которое подгружается контент через 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); }); });
CSS:
CODE ( html):
скопировать код в буфер обмена
<style> #modal_back { width: 100%; height: 100%; background: black; opacity: 0.5; position: fixed; z-index: 100; display: block; left: 0; top: 0; cursor: pointer; } #modal_form { position: fixed; display: none; min-width: 500px; min-height: 200px; max-width: 80%; max-height: 80%; background: url("../../images/index_box_1_bg.png") repeat scroll 0 0 transparent; z-index: 101; padding: 30px 10px 10px; border-radius:7px; -moz-border-radius:7px; -o-border-radius:7px; -webkit-border-radius:7px; } #modal_form_header + div { overflow: auto; height: 100%; width: 100%; border-radius:7px; -moz-border-radius:7px; -o-border-radius:7px; -webkit-border-radius:7px; } #modal_form_header { height: 20px; padding: 0 10px; text-align: right; position: fixed; top: inherit; left: inherit; width: inherit; z-index: 102; border: inherit; border-width: 0 5px; } #modal_form_header span { color: red; font-size: 13px; font-weight: bold; line-height: 30px; vertical-align: middle; margin-right: 10px; cursor: pointer; } </style>
беда в ХРОМе и Осле в том что DIV[#modal_form_header] остается по центре формы ну и с ним кнопка "ЗАКРЫТЬ" а если я в Хромовском "фаербаге" обновляю этот блок, то он становится на свое должное место. Вобщем вопрос в том, как после всех действий в скрипте обновить блоки так чтобы они стали на свое место?
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)
Описание: JQuery + CSS
