1. 首頁
  2. 問答
  3. 打開模態窗口（AJAX？jQuery的？）

打開模態窗口（AJAX？jQuery的？）

2013-03-05 128 views
0

我已經改寫我的第一個問題因爲它太含糊，我相信！打開模態窗口（AJAX？jQuery的？）

案例：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 = '[email protected]'; 

$mail_to = '[email protected]'; 
$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 [email protected]'); 
     window.location = 'index.contacto.html'; 
    </script> 
<?php 
} 
?>

我想要做的事情如下...

的聯繫方式，現在的工作，我也得到了電子郵件......這很好......這樣：

1 - 我需要消除頁面刷新/重定向當您提交表單 2-要更換刷新/重載/重定向，我需要的是當表單submited，我希望它打開一個模式窗口（我會把任何內容有...）（例如：pixeden.com/media-icons/soft-media-icons-set-vol-2 ...的直徑日誌打開，當我點擊「下載」）

這是其他用戶推薦我的模態對話框（這是相當不錯）：mywebdeveloperblog.com/my-jquery-plugins/modalpoplite

的事情是我不知道如何刪除重裝/刷新/ submiting後重定向的問題，我不知道如何形式submited後連接模式對話框開幕活動......

注：

我對這一切都很陌生（我只有17歲），所以我不是一名程序員......只是一位瞭解小編程的設計師......但我正在學習編程網站，所以我需要幫幫我。

如果PHP是不是要走的路，我需要chenge編程技術的，請讓我知道。我願意接受任何能夠完全解決我的問題的編程語言！

非常感謝！

來源

2013-03-05 Santiago Baigorria

回答

0

將這個腳本在您的聯繫方式的<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>

來源

2013-03-05 03:40:04

+0

塞繆爾，這太好了！它確實是我想要的。現在我只能定製和設計一切，這是我理解的唯一一件事！所以非常感謝！但是，我遇到了一個問題...檢查頁面：http://santz.net/index.contacto.html，您會發現在底部，如果您還沒有提交任何表單，「對話框 - 莫代爾「div沒有隱藏，我的意思是，文本就在那裏（檢查在左下角）。第二件事是我提交了表格，但是在ir！之後這個問題不能解決，你能幫我解決這個問題嗎？非常感謝！ Sory去打擾！ – 2013-03-05 12:14:50

+0

我以爲你提到過你知道如何塑造一切？只需在CSS中將div的顯示設置爲none即可。 – 2013-03-05 13:54:05

+0

我是Santiago B.我給你發了一條消息給你的Facebook！如果你可以，我不打擾你，請回答我！非常感謝！編輯：我有設置顯示：無，但對話框的內容也是「無」時，它應該顯示！ – 2013-03-05 14:32:01

相關問題

 相關問題