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 编写了一些验证，如果没有错误消息，我将得到另一个颜色框，代码如下：

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 内容的新颜色框即将出现，这里我有一个确定按钮，我想做该按钮作为此颜色框的关闭按钮。我怎样才能在这里获得确定按钮的功能？非常感谢任何人的帮助....在此先感谢....

4

2 回答 2

2

您不需要 2 个颜色框来执行此操作。
你为什么不简单地创建一个div哪个类，message_content然后根据 ajax 状态更新它的文本？
好多了。

示例：

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对它们使用相同的功能。这就是你需要的。
演示

我将一些更改ids为，classes因此您不需要使用相同代码的 2 个事件。

这是las 版本。
您可以看到您可以存储options每种颜色框，然后通过参数传递它们。

于 2012-07-20T00:28:16.400 回答
0

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

于 2012-07-20T04:09:08.813 回答