using colorbox over another colorbox using jquery/ajax

问题

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

回答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.

回答2:

i got the answer and the fiddile shows how to do it.....::::))))) http://jsfiddle.net/srinivaswaterdrop01/4vuDC/189/

来源：https://stackoverflow.com/questions/11566580/using-colorbox-over-another-colorbox-using-jquery-ajax

标签

javascript

jquery

ajax

colorbox