使用colorbox爲PHP表單創建「thankyou」彈出框

我已經在我的網站上使用了colorbox，因此想要使用inlineHTML colorbox在用戶提交表單後向用戶顯示thankyou反饋。使用colorbox爲PHP表單創建「thankyou」彈出框

我已經設置了包含謝謝文本的內聯內容contact_thanks，作爲隱藏的div。

我然後設置PHP腳本重新路由到我的域名+ #contact_thanks

唯一的問題是，我錯過調用jQuery來改變顏色框格從隱藏的某些部分，而且我我不知道我需要在代碼中放置什麼才能使其工作。

直播現場，可以發現here，隨時發送測試消息（只問我在莫！）

的PHP

<?php 
    $name = $_REQUEST['name'] ; 
    $email = $_REQUEST['email'] ; 
    $message = $_REQUEST['message'] ; 

    mail("[email protected]", "Message", 
    $message, "From: $email"); 
    header("Location: http://www.mysite.co.uk/james/index.php#contact_thanks"); 
?>

的HTML

<div style='display:none'> 
     <div id='contact_thanks' style='padding:10px; background:#fff;'> 
     <span class="colorBox">Thank you for your message!</span> 
     <p>Thanks!</p> 
</div> 
</div>

來源

2012-08-22 Francesca

，你需要從'$（函數調用您的彈出（）{.. 。}）;'在jQuery中。我會發送一個查詢字符串變量並測試它。 – Matt

你能用一些示例代碼解釋一點嗎？我不完全確定如何在PHP腳本中調用這個函數。 – Francesca

將此添加到您的.js文件（假設您已加載jQuery）：

$(window).load(function() { 
    if(window.location.hash == '#contact_thanks') { 
     $('#contact_thanks').show(); 
    } 
});

但你也需要編輯HTML：

<div id='contact_thanks' style='padding:10px; background:#fff; display:none'> 
    <span class="colorBox">Thank you for your message!</span> 
    <p>Thanks!</p> 
</div>

其實，這是好得多的所有樣式移動到你的CSS，並適用於#contact_thanks。還有更好的選擇，但實現起來會有點困難 - 通過.ajax（）發送表單數據，然後在成功後顯示消息。使用jQuery

<div style="display: none"> 
    <div id="contact_thanks" style="padding-top: 10px; padding-right: 10px; padding-bottom: 
....

要麼給那個無名div名稱（ID），然後$().show()，或者只是隱藏實際#contact_thanks：

來源

2012-08-22 22:38:36

嗨，我試過這個沒有運氣。我也嘗試將該函數放在文件的頭部以檢查它是否與外部文件不存在問題，但它仍然不起作用:( – Francesca

@FrancescaHaselden，它爲我工作，我改變了窗口。加載到的document.ready，檢查： http://jsfiddle.net/ACJGH/2/ 這裏是一個工作演示 - 沒有哈希：http://fiddle.jshell.net/ACJGH/3/顯示/ 與哈希：http://fiddle.jshell.net/ACJGH/3/show/#contact_thanks 也仔細檢查你有jQuery加載。 –

你不是躲在#contact_thanksdiv，但一些不願透露姓名的div instead div。

所以不是：

<div style="display: none"> 
     <div id="contact_thanks" style="......

有它喜歡：

<div id="give_the_div_a_name_either_way"> 
     <div id="contact_thanks" style="display: none"

，然後用位的jQuery：$("#contact_thanks").show();

應該做的伎倆。

來源

2012-08-23 01:12:10

嗨，你能解釋我需要把那個jQuery的確切位置它不會影響我的其他顏色盒？ – Francesca

好吧，它不應該影響你的其他顏色盒，因爲它只是與'＃contact_thanks'一起工作。我會把它放在你的文檔的頭部。 – 2012-08-23 23:32:16

替換此：

$(window).load(function() { 
    if(window.location.hash == '#contact_thanks') { 
     $('#contact_thanks').show(); 
    } 
});

這一點：如果你想在彈出顯示在頁面加載

$(document).ready(function() { 
    if(window.location.hash == '#contact_thanks') { 
     $.colorbox({inline:true, href:'#contact_thanks', width:700}); 
    } 
});

來源

2012-08-23 11:01:40 Jack

使用colorbox爲PHP表單創建「thankyou」彈出框

回答

相關問題