0

由于不推荐使用的 jQuery，我只需要更新到新版本的颜色框​​。

以前我有一个链接到表单上的提交按钮的颜色框（呈现“感谢您的消息！”）

由于更新了彩盒，这不再有效。

这是与 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 错误，但它不再启动颜色框！

在这里查看真实网站并尝试填写表格

表格：

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

发邮件：

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

1 回答 1

0

我不确定我们正在谈论的颜色框是否相同，我使用了这个：

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我为响应的 html 添加了一个节点，并在显示颜色框后删除。id_1contact_thankssendmail.php

于 2013-04-25T18:15:54.923 回答