链接按钮不再启动到colorbox

我只是不得不更新到较新版本的colorbox，因为不推荐使用jQuery。链接按钮不再启动到colorbox

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

由于更新颜色框，这将不再有效。

这是用颜色框1.3的工作，而不是颜色框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("[email protected]", "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; 
?>

来源

2013-04-25 Francesca

你仍然有js错误“Uncaught TypeError：Object [object Object] has no method'live'”试着先修复它 – 2013-04-25 15:23:44

检查与Firebug，我得到：错误：'权限被拒绝访问属性'toString''享受 – 2013-04-25 15:24:49

@roasted奇特..只是修复，不再看到错误。已经解决了其他问题，但这仍然是...'.live'不再使用，所以应该工作？ – Francesca 2013-04-25 15:26:04

我不知道是否有颜色框，我们正在谈论大约是一样的，我用这个：

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

正如我所看到的，它直接支持ajax（$('.ajax').colorbox()），所以我不明白为什么你自己编写代码，但没关系。

但是，似乎你希望html在颜色框中显示的ajax响应，并且在用户关闭该colorbox之后，它显示最初在文档中隐藏的内容。而下面的代码做到这一点：

<!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链接，这是由sendmail.php回答同一个文档contact_thanks的a标签，我添加了一个节点响应html和显示颜色框在删除后。

来源

2013-04-25 18:15:54

链接按钮不再启动到colorbox

回答

相关问题