链接按钮不再启动到颜色盒 - Link button no longer launching to colorbox

由于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();
      });
     }  
   });
  }

点击提交按钮导致#HiddenBox显示使用.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

无法在页面上找到任何与此相关的JS错误，但它不再启动colorbox!

在这里看到真实的网站，并尝试填写表格

的形式:

<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>

Sendmail:

<?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;
?>

我不确定我们正在谈论的colorbox是否相同，我使用了这个:

http://www.jacklmoore.com/colorbox/

正如我所看到的，它直接支持ajax ($('.ajax').colorbox())，所以我不明白为什么你自己写代码，但这并不重要。

然而，似乎你希望在颜色框中显示ajax的html响应，并在用户关闭颜色框后，它显示原来在文档中隐藏的内容。下面的代码会这样做:

<!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>

注意id_1的a标签链接到sendmail.php响应的同一文档contact_thanks，我为响应的html添加了一个节点，并在显示颜色框后删除。