Php 链接按钮不再启动到colorbox_Php_Jquery_Colorbox

Php 链接按钮不再启动到colorbox

php jquery

Php 链接按钮不再启动到colorbox,php,jquery,colorbox,Php,Jquery,Colorbox,由于不推荐使用jQuery，我不得不更新到新版本的colorbox 以前，我在表单上有一个链接到提交按钮的颜色框（显示“感谢您的邮件！”）自从更新了colorbox之后，这就不再有效了这是使用colorbox 1.3而不是colorbox 1.4的原始代码 function SendMailForm(){ var dataString = $("#form1").serialize(); $.ajax({ type:"POST", url:"sen

由于不推荐使用jQuery，我不得不更新到新版本的colorbox

以前，我在表单上有一个链接到提交按钮的颜色框（显示“感谢您的邮件！”）

自从更新了colorbox之后，这就不再有效了

这是使用colorbox 1.3而不是colorbox 1.4的原始代码

  function SendMailForm(){
    var dataString = $("#form1").serialize();
    $.ajax({
      type:"POST",
      url:"sendmail.php",
      data:dataString,
      cache:false,
      success:function(html){
       $("#HiddenBox").show();
       $("#HiddenBox").html(html);
       $.fn.colorbox({'href':'#HiddenBox', 'open':true, 'inline':true, 'width':'600px', 'height':'200px'});
       $(document).bind('cbox_closed', function(){
        $("#HiddenBox").hide();
      });

     }  
   });
  }

点击提交按钮导致使用

.show（）

隐藏框代码是非常简单的颜色框代码：

<div id="HiddenBox" style='display:none'>
      <span class="colorBox">Thanks for your message</span>
        <p>I'll get back to your query as soon as I can!</p>
    </div


谢谢你的留言
我会尽快回复你的问题
我不确定我们谈论的颜色盒是否相同，我使用了以下方法：

正如我所看到的，它直接支持ajax（$（'.ajax'）.colorbox（）
），所以我不明白为什么您自己编写代码，但这并不重要
但是，您似乎希望html响应颜色框中显示的ajax，在用户关闭颜色框后，它会显示文档中原来隐藏的内容。下面的代码可以做到这一点：
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="jquery.colorbox.js"></script>

        <script language='javascript'>
            function SendMailForm() {
                var dataString=$('#form1').serialize();

                $.ajax({
                    type: 'POST',
                    url: 'sendmail.php',
                    data: dataString,
                    cache: false,
                    success:
                        function (html) {
                            $('#HiddenBox').show();
                            var node=document.createElement('div');
                            node.innerHTML=html;
                            document.body.appendChild(node);
                            id_1.click();
                            document.body.removeChild(node);
                        }
                });
            }

            $(document).ready(
                function () {
                    $('.inline').colorbox({ inline: true, width: '50%' });
                }
                );
        </script>
    </head>

    <body>
        <form id='form1' class='formular' method='post' action='javascript:SendMailForm();'>
            <fieldset>
                <input data-validation-placeholder='Name' class='validate[required] text-input' type='text' name='reqplaceholder' id='reqplaceholder' placeholder='Name' data-prompt-position='topRight:-79,15' />
                <br /><br />
                <input data-validation-placeholder='Email' class='validate[required] text-input' type='text' name='reqplaceholder' id='reqplaceholder' placeholder='Email' data-prompt-position='topRight:-79,15' />
                <br /><br />
                <textarea value="What's on your mind?" data-validation-placeholder='Message' class='validate[required] text-input message' type='text' name='message' id='reqplaceholder' class='message' placeholder="What's on your mind?" data-prompt-position='topRight:-79,15' ></textarea>
                <br /><br />
                <input class='button' type='submit'>
            </fieldset>
        </form> 

        <a id='id_1' class='inline' href="#contact_thanks" style='display: none'></a>

        <div id='HiddenBox' style='display:none'>
            <span class='colorBox'>Thanks for your message</span>
            <p>I'll get back to your query as soon as I can!</p>
        </div>
    </body>
</html>


函数SendMailForm（）{
var dataString=$（'#form1'）.serialize（）；
$.ajax({
键入：“POST”，
url:'sendmail.php'，
数据：dataString，
cache:false，
成功：
函数（html）{
$（'#HiddenBox'）.show（）；
var节点=document.createElement（'div'）；
node.innerHTML=html；
document.body.appendChild（节点）；
id_1.单击（）；
document.body.removeChild（节点）；
}
});
}
$（文件）。准备好了吗(
函数（）{
$（'.inline'）.colorbox（{inline:true，宽度：'50%}）；
}
);









谢谢你的留言
我会尽快回复你的问题

请注意id_1
链接的a
标记指向同一文档contact\u感谢，该文档由sendmail.php
响应，我为响应的html添加了一个节点，并在显示颜色框后删除
 您仍然有js错误“Uncaught TypeError:Object[Object Object]没有方法'live'”，请尝试先用Firebug修复它，我得到：错误：访问属性'toString'的权限被拒绝。
Enjoy@roasted特有的只是解决了这个问题，不再看到错误。已修复其他问题，但此问题仍然存在.live不再使用，是否应该工作？
<?php
  $name = $_POST['name'] ;
  $email = $_POST['email'] ;
  $message = $_POST['message'] ;

  if(mail( "blah@jamesperrett.co.uk", "Message via JamesPerrett.com",
    $message, "From: $email" )):
      echo "<div id='contact_thanks' style='padding:10px; background:#fff;height:200px;'>";
      echo "<span class='colorBox'>Thanks!</span>";
      echo "<p>Thanks for your message, I'll get back to you as soon as I can!</p>";
      echo "</div>";
  endif;
?>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="jquery.colorbox.js"></script>

        <script language='javascript'>
            function SendMailForm() {
                var dataString=$('#form1').serialize();

                $.ajax({
                    type: 'POST',
                    url: 'sendmail.php',
                    data: dataString,
                    cache: false,
                    success:
                        function (html) {
                            $('#HiddenBox').show();
                            var node=document.createElement('div');
                            node.innerHTML=html;
                            document.body.appendChild(node);
                            id_1.click();
                            document.body.removeChild(node);
                        }
                });
            }

            $(document).ready(
                function () {
                    $('.inline').colorbox({ inline: true, width: '50%' });
                }
                );
        </script>
    </head>

    <body>
        <form id='form1' class='formular' method='post' action='javascript:SendMailForm();'>
            <fieldset>
                <input data-validation-placeholder='Name' class='validate[required] text-input' type='text' name='reqplaceholder' id='reqplaceholder' placeholder='Name' data-prompt-position='topRight:-79,15' />
                <br /><br />
                <input data-validation-placeholder='Email' class='validate[required] text-input' type='text' name='reqplaceholder' id='reqplaceholder' placeholder='Email' data-prompt-position='topRight:-79,15' />
                <br /><br />
                <textarea value="What's on your mind?" data-validation-placeholder='Message' class='validate[required] text-input message' type='text' name='message' id='reqplaceholder' class='message' placeholder="What's on your mind?" data-prompt-position='topRight:-79,15' ></textarea>
                <br /><br />
                <input class='button' type='submit'>
            </fieldset>
        </form> 

        <a id='id_1' class='inline' href="#contact_thanks" style='display: none'></a>

        <div id='HiddenBox' style='display:none'>
            <span class='colorBox'>Thanks for your message</span>
            <p>I'll get back to your query as soon as I can!</p>
        </div>
    </body>
</html>