1. 首页
  2. 问答
  3. 打开模态窗口（AJAX？jQuery的？）

打开模态窗口（AJAX？jQuery的？）

2013-03-05 110 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

相关问题

 相关问题