使用颜色框采用了另一种颜色框的jQuery / AJAX [英] using colorbox over another colorbox using jquery/ajax

问题描述

我有一个页面，我使用了一个id为emailfrnd，从下面的脚本我成功地实施了颜色框：

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>

现在新的颜色框包含在它的idemailfrnd_submit现在我已经使用jQuery和放写了一些验证发送按钮形式;阿贾克斯，如果没有errorMessages我会得到另一种颜色框和code是如下：

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

高达现在根据这个codeA新的颜色框与HTML内容如上面来了我成功地做验证后得到的东西，因为我想，这里的onclick发送按钮，在这里我有一个确定按钮点击这里，我想作出这样的按钮，这个颜色框的关闭按钮。我怎样才能在这里的OK按钮的功能？ 任何帮助是非常AP preciated ....在此先感谢.....

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

推荐答案

您不需要2 colorboxes做。
你为什么不简单的创建一个 DIV 的类是 message_content ，并更新其根据AJAX状态的文本？
这是好多了。

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.

示例：

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

更新基于<一href="http://stackoverflow.com/questions/11566580/using-colorbox-over-another-colorbox-using-jquery-ajax/11571246#comment15310468_11571246">this评论：

如果你想同样的funcionality为不同的按钮，你必须使用相同的类他们。 这里就是你需要的。
演示

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

我改变了一些 IDS 到类，所以你并不需要2事件与同code

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

和这里的 拉斯维加斯版本 。
你可以看到，你可以存储各种颜色框你的选项，然后通过他们thrue参数。

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.

这篇关于使用颜色框采用了另一种颜色框的jQuery / AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！