Question

i have a page where i’m using a with id=”emailfrnd”, from the following script i successfully implemented the colorbox:

<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>

now the new colorbox contains a form with a send button in it of id “emailfrnd_submit” now i had written some validations using the jquery & ajax and if there are no errorMessages i’ll get another colorbox and the code is as follows:

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);
}
});

upto now i succeed in getting the things as i want, here after doing the validations and onclick the send button according to this code a new colorbox with the html content as above is coming, here i have a Ok button here, i want to make that button as the closing button of this colorbox. how can i get that functionality for the ok button here??
anyone help is much appreciated….thanks in advance…..

Answer 1

You don’t need 2 colorboxes to do it.
Why don’t you simple create a div which class is message_content and you update it’s text according to the ajax status ?
It’s much better.

Example:

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);
}

Update based on this comment:

If you want the same funcionality for different buttons you have to use the same class for them.
here’s what do you need.
demo

I changed some ids to classes so you don’t need 2 events with the same code.

And here’s the las version.
You can see that you can store your options for each kind of colorbox and then pass them thrue parameter.