2

私はすでに自分のサイトでカラーボックスを使用しているので、ユーザーがフォームを送信したら、inlineHTMLカラーボックスを使用してユーザーに感謝のフィードバックを提示したいと思います。

感謝のテキストを含むインラインコンテンツcontact_thanksを非表示のdivとして設定しました。

次に、自分のドメインに再ルーティングするようにPHPスクリプトを設定しました+ #contact_thanks

唯一の問題は、jQueryを呼び出してカラーボックスdivを非表示から変更する部分が欠落していることです。これを機能させるためにコードに何を入れる必要があるのか​​わかりません。

ライブサイトはここにあります、テストメッセージを送ってください（それはmoで私にだけ行きます！）

PHP

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

  mail( "myemail@gmail.com", "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>
4

3 に答える 3

1

これを置き換えます：

$(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-23T11:01:40.303 に答える
0

あなたはを隠していません#contact_thanks divが、代わりに名前のないものがありdivます：

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

名前divのない名前（id）を$().show()付けてから、jQueryを使用するか、実際のを非表示にし#contact_thanks 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-23T01:12:10.013 に答える
0

これを.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（）を介してフォームデータを送信し、成功後にメッセージを表示します。

于 2012-08-22T22:38:36.243 に答える