0

次のスクリプトから id="emailfrnd" を使用しているページがあり、カラーボックスを正常に実装しました:

<script type="text/javascript">
$(document).ready(function(){
$("#emailfrnd").colorbox({
        inline: true,
        href:"#ef",
        close:"",
    opacity:0.95,
        onClosed:function(){
            //window.parent.location.reload(true);
        }
         });
 });
</script>

新しいカラーボックスには、ID「emailfrnd_submit」の送信ボタンを含むフォームが含まれています。jquery と ajax を使用していくつかの検証を記述しました。errorMessages がない場合は、別のカラーボックスを取得します。コードは次のとおりです。

if (errorMessage == '') {
    $.ajax({
        type: 'POST',
        url: root_url + '/services/services.php?method=emailfrnd',
        data: "name=" + name + "&email=" + email + "&message=" + message,
        async: true,
        success: function (data) {
            if (data == 1) {
                $("#emailfrnd_submit").colorbox({
                    inline: false,
                    close: "",
                    html: "<div style='height:230px;width:400px;display:block;'><p style='color:black;font:16px verdana;'>Your email was successfully sent.</p><br/><p style='color:gray; font:16px verdana;'>Thank you for telling your friend</p><div id='emailfrnd_sub' style='width: 50px;margin-top:30px;float: right;'><input type='submit' value='OK' name='emailfrnd_submit' id='emailfrnd_sub' class='redbut' style='float:right;position:absolute;right: 198px;margin-top: 0px;color:white;'></div></div>",
                    opacity: 0.95,
                    onClosed: function () {
                        //window.parent.location.reload(true);
                    }
                });
                //window.location.assign("../index.php");
            } else {
                alert('mail not send');
            }
        }
    });
} else {
    alert(errorMessage);
}
});

今まで私は欲しいものを手に入れることに成功しました。ここで検証を行い、このコードに従って送信ボタンをクリックした後、上記のようなhtmlコンテンツを含む新しいカラーボックスが来ています。ここにOKボタンがあります。作りたいですそのボタンをこのカラーボックスの閉じるボタンとして使用します。ここでOKボタンの機能を取得するにはどうすればよいですか?? 誰でも助けていただければ幸いです....事前に感謝します.....

4

2 に答える 2

2

それを行うのに 2 つのカラーボックスは必要ありません。which class is
を簡単に作成し、ajax の状態に応じてそのテキストを更新してみませんか? それははるかに優れています。divmessage_content

例：

html :

<div id="colorbox_content"> //@todo: change to colorbox id

    <form id="your_form">   //@todo: change according to your form id

    </form>

    <div class="message_content">

        <p class="message"></p>
        <span class="close"><a href="javascript:void(0);">Close</a></span>

    </div>

</div>

js :

/**
 * Close message
 */
jQuery('#colorbox_content').on('click', '.close', function() {
    jQuery(this).closest('#message_content').slideUp();
});

/**
 * On form submit
 */
if (errorMessage == '') {
    $.ajax({
        type: 'POST',
        url: root_url + '/services/services.php?method=emailfrnd',
        data: "name=" + name + "&email=" + email + "&message=" + message,
        async: true,
        success: function (data) {
            if (data == 1) {
                var message = "Your email was successfully sent.";
                //window.location.assign("../index.php");
            } else {
                var message = "Your email was successfully sent.";
            }
            jQuery('#colorbox_content').slideDown().find('.message').text(message);
        }
    });
} else {
    alert(errorMessage);
}

このコメントに基づいて更新します。

異なるボタンに同じ機能が必要な場合は、同じものを使用する必要がありclassます。ここに何が必要ですか。
デモ

同じコードで 2 つのイベントが必要ないように、いくつかidsを変更しました。classes

そして、これがlasバージョンです。各種類のカラーボックスを保存して、パラメーターを介して渡すこと
ができることがわかります。options

于 2012-07-20T00:28:16.400 に答える
0

私は答えを得て、フィディルはそれを行う方法を示しています.....::::))))) http://jsfiddle.net/srinivaswaterdrop01/4vuDC/189/

于 2012-07-20T04:09:08.813 に答える