Question

我已经在我的网站上使用了colorbox，所以想要使用inlineHTML颜色框，一旦用户提交了表单，就会向用户提供一个反馈。

我已经设置了包含thankyou文本的内联内容contact_thanks，作为隐藏的div。

然后我将PHP脚本设置为重新路由到我的域+ #contact_thanks

唯一的问题是，我缺少一些调用jQuery来改变colorbox div隐藏的部分，而且我不确定我需要在代码中添加什么才能使其工作。

可以找到实时网站here，随时发送测试消息（只在mo发送给我！）

PHP

<?php
  $name = $_REQUEST['name'] ;
  $email = $_REQUEST['email'] ;
  $message = $_REQUEST['message'] ;

  mail( "myemail@gmail.com", "Message",
    $message, "From: $email" );
  header( "Location: http://www.mysite.co.uk/james/index.php#contact_thanks" );
?>

HTML

<div style='display:none'>
      <div id='contact_thanks' style='padding:10px; background:#fff;'>
      <span class="colorBox">Thank you for your message!</span>
      <p>Thanks!</p>
</div>
</div>

Answer 1

替换它：

$(window).load(function() {
    if( window.location.hash == '#contact_thanks' ) {
      $('#contact_thanks').show();
    } 
});

有了这个：

$(document).ready(function() {
    if( window.location.hash == '#contact_thanks' ) {
      $.colorbox({inline:true, href:'#contact_thanks', width:700});
    } 
});

Answer 2

将此添加到.js文件中（假设您已加载jQuery）：

$(window).load(function() {
    if( window.location.hash == '#contact_thanks' ) {
      $('#contact_thanks').show();
    } 
});

但你还需要编辑你的html：

<div id='contact_thanks' style='padding:10px; background:#fff; display:none'>
    <span class="colorBox">Thank you for your message!</span>
    <p>Thanks!</p>
</div>

实际上，将所有样式移动到css并应用于#contact_thanks要好得多。并且有更好的选择，但实现起来会有点困难 - 通过.ajax（）发送表单数据，然后在成功后显示您的消息。

Answer 3

您没有隐藏#contact_thanks div，而是隐藏了一些未命名的div：

<div style="display: none">
  <div id="contact_thanks" style="padding-top: 10px; padding-right: 10px; padding-bottom: 
....

将未命名的div命名为（{1}}，然后使用jQuery $().show()，或者只隐藏实际的#contact_thanks div。

所以而不是：

<div style="display: none">
      <div id="contact_thanks" style="......

喜欢它：

<div id="give_the_div_a_name_either_way">
      <div id="contact_thanks" style="display: none"

然后使用一些jQuery：$("#contact_thanks").show();

应该做的伎俩。

使用colorbox为PHP表单创建“thankyou”弹出窗口

3 个答案: