Вход

Просмотр полной версии : Помогите закрыть модальное окно...


ale19
13.10.2011, 20:18
Здравствуйте, возникла проблемма и я не могу её решить...
Суть:
есть форма отправки сообщения с сайта,которая имеет шаблон
<table id="table1" border="0" cellpadding="2" cellspacing="1" width="100%">
<tbody>
<tr><td style="text-align: left; vertical-align: middle; padding-bottom: 5px; letter-spacing: 0pt; word-spacing: 0pt;"><b>Укажите текст замечания для публикации:</b></td></tr>
<tr><td>Ваш e-mail <font color="red">*</font>:<br><input name="f1" size="30" style="width:100%;" maxlength="70" type="text"></td></tr>
<tr><td>Текст сообщения <font color="red">*</font>:<br><textarea rows="4" name="f3" cols="30" style="width:100%;"></textarea></td></tr>
<tr><td colspan="2" align="right"><br><input value="Отправить замечание" type="submit"></td></tr>
</tbody></table>
Эта форма по клику на ссылку открывается в модальном окне

Не выходит сделать так, чтоб окно закрывалось одновременно с отправкой сообщения после нажатия на
<input value="Отправить замечание" type="submit">
Вот сам скрипт модального окна:
$(document).ready(function(){
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="/.s/t/785/8.png" class="btn_close" title="Закрыть окно" alt="Закрыть" border="0"/></a>');
var popMargTop = ($('#' + popID).height() + 370) / 2;
var popMargLeft = ($('#' + popID).width() + 50) / 2;
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=0)'}).fadeIn(); //Fade in the fade layer
return false;
});
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
Там есть кнопочка закрывающая окно
<a href="#" class="close"><img src="/.s/t/785/8.png" class="btn_close" title="Закрыть окно" alt="Закрыть" border="0"/></a>
но хотелось бы именно для этой формы сделать именно так как указано выше

Заранее спасибо откликнувшимся!!!

yashka525
14.10.2011, 01:05
У Вас:

$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
});

При щелчке по кнопочке закрывающую окно выполняется сия функция. Примените эту функцию на событие отправки формы. Примерно так:

function closeWindow() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
};
$('a.close, #fade').live('click', function() {closeWindow();});

Для кнопки:
<input value="Отправить замечание" type="submit" onclick="closeWindow()">
Тоесть тут мы сделали одну функцию и обращаемся к ней либо по клику на крестик, либо по отправке формы.

P.S. Не забудте сказать пользователю что сообщение успешно отправилось... в пустоту, например. :D

ale19
14.10.2011, 08:46
yashka525,
Спасибо...всё нормально...работает...
А на счетP.S. Не забудте сказать пользователю что сообщение успешно отправилось... в пустоту, например. всё нормально...сообщает...