Открытые модальные окна после отправки контактной формы PHP (AJAX? JQuery?)

Question

У меня переформулировал мой первый вопрос, потому что он был слишком расплывчатым, я верю!

Корпус: santz.net/index.contacto.html (если вы хотите попробовать что-то посылать это нормально ... Я не получаем его, так нет проблем)

Вот мой код .... .

Контактная форма:

<form id="contact-form" name="contact-form" class="p25" action="contact.php" method="post"> 
     <fieldset> 
      <label class="name"> 
       <input class="input" type="text" value="Nombre" onfocus="if(this.value == 'Nombre'){this.value = '';}" onblur="if(this.value == ''){this.value='Nombre';}" name="php_name" /> 
      </label> 
      <label class="email"> 
       <input class="input" type="email" value="Email" onfocus="if(this.value == 'Email'){this.value = '';}" onblur="if(this.value == ''){this.value='Email';}" name="php_email" /> 
      </label> 
      <label class="phone"> 
       <input class="input" type="tel" value="Teléfono" onfocus="if(this.value == 'Teléfono'){this.value = '';}" onblur="if(this.value == ''){this.value='Teléfono';}" name="php_phone" /> 
      </label> 
      <label class="message"> 
       <textarea class="textarea" onfocus="if(this.value == 'Mensaje'){this.value = '';}" onblur="if(this.value == ''){this.value='Mensaje';}" name="php_message">Mensaje</textarea> 
      </label> 

      <div class="buttons-wrapper ml20"> 
       <div class="submit-comment"> 
        <span></span> 
        <input type="reset" value="Cancelar"> 
       </div> 
       <div class="submit-comment ml25"> 
        <span></span> 
        <input type="submit" value="Enviar"> 
        <div id="clicker"></div> 
       </div> 
      </div> 
     </fieldset> 
    </form> 

А вот мой PHP код:

<?php 
$field_name = $_POST['php_name']; 
$field_email = $_POST['php_email']; 
$field_phone = $_POST['php_phone']; 
$field_message = $_POST['php_message']; 

$field_sender = 's2@hotmail.com'; 

$mail_to = 's@hotmail.com'; 
$subject = 'Mensaje via Santz.net de '.$field_name; 

$body_message = 'From: '.$field_name."\n"; 
$body_message .= 'E-mail: '.$field_email."\n"; 
$body_message .= 'Phone: '.$field_phone."\n"; 
$body_message .= 'Message: '.$field_message; 

$headers = 'From: '.$field_sender."\r\n"; 
$headers .= 'Reply-To: '.$field_email."\r\n"; 

$mail_status = mail($mail_to, $subject, $body_message, $headers); 

if ($mail_status) { ?> 
    <script language="javascript" type="text/javascript"> 
     alert('Gracias por contactarse, en breve, me pondre en contacto.\n\nSantz Design | www.santz.net'); 
     window.location = 'index.contacto.html'; 
    </script> 
<?php 
} 
else { ?> 
    <script language="javascript" type="text/javascript"> 
     alert('El envio fallo. Por favor, envie un mail directamente a info@santz.net'); 
     window.location = 'index.contacto.html'; 
    </script> 
<?php 
} 
?> 

То, что я хочу сделать, это сделать следующее ...

Контактная форма сейчас работает, и я получаю электронную почту ... это нормально ... так:

1 - Мне нужно устранить обновление/перенаправление страницы при отправке формы 2- Чтобы заменить обновление/перезагрузку/перенаправление, мне нужно, чтобы при отправке формы я хочу, чтобы она открыла модальное окно (я бы поместил любой контент там ...) (пример: pixeden.com/media-icons/soft-media-icons-set-vol-2 ... dia войти, который открывается, когда я нажимаю «Скачать»)

Это то, что другой пользователь рекомендовал меня для коробки модальной (это довольно мило): mywebdeveloperblog.com/my-jquery-plugins/modalpoplite

дело в том, я не понимаю, как удалить перезагружать/обновление/перенаправление вопроса после завершения заполнения и я не понимаю, как подключить открытие модального окна события после того, как форма занесена ...

ПРИМЕЧАНИЕ:

Я совершенно новичок во всем этом (мне только в возрасте 17 лет), поэтому я не программист ... просто дизайнер, который понимает мало программирования ... но я учу программировать сеть, поэтому мне нужно Помогите.

Если PHP не подходит, и мне нужно использовать технологию программирования, пожалуйста, дайте мне знать. Я открыт для любого языка программирования, который полностью решает мою проблему!

Большое спасибо !!!

Answer 1

Поместите этот сценарий в <head> вашей контактной формы:

<link href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#dialog-modal").dialog({ 
     height: 140, 
     modal: true, 
     autoOpen: false 
    }); 
    $('#contact-form').submit(function() { 
     $("#dialog-modal").dialog("open"); 
     $.ajax({ 
      type: "POST", 
      url: $(this).attr('action'), 
      data: $(this).serialize(), 
      success: function() { 
       $("#dialog-modal").dialog("close"); 
      } 
     }); 
     return false; 
    }); 
}); 
</script> 

Вставить это где-нибудь в теле:

<div id="dialog-modal">Form submitted</div> 

Answer 2

Santz, они, скорее всего, с помощью диалогового интерфейса окна AJAX и JQuery в отображается, когда возвращается ответ javascripts ajax. Вот небольшой учебник, объясняющий, как они это делают. Удачи.

http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/