鏈接按鈕不再啓動到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

回答

相關問題