Question

由于不推荐使用jQuery，我只需要更新到更新版本的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错误，但它不再启动彩盒！

查看真实网站here并尝试填写表单

表格：

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

Answer 1

我不确定我们谈论的颜色盒是否相同，我用过这个：

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

正如我所看到的，它直接支持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>

请注意a的{{1}}标记链接到id_1响应的同一文档contact_thanks，我为响应的html添加了一个节点，并在彩色框后删除显示。

链接按钮不再启动到彩色框

1 个答案: