使用jquery / ajax在另一个颜色框上使用colorbox
我有一个页面，我正在使用id =“emailfrnd”，从以下脚本我成功实现了colorbox：
$(document).ready(function(){ $("#emailfrnd").colorbox({ inline: true, href:"#ef", close:"", opacity:0.95, onClosed:function(){ //window.parent.location.reload(true); } }); }); 现在新的颜色框包含一个带有发送按钮的表单，其中id为“emailfrnd_submit”，现在我已经使用jquery＆ajax编写了一些validation，如果没有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: "Your email was successfully sent.
Thank you for telling your friend
", opacity: 0.95, onClosed: function () { //window.parent.location.reload(true); } }); //window.location.assign("../index.php"); } else { alert('mail not send'); } } }); } else { alert(errorMessage); } });
到目前为止我成功地获得了我想要的东西，在这里做了validation并按照这个代码点击发送按钮一个带有上面html内容的新颜色盒即将到来，这里我有一个Ok按钮，我想制作该按钮作为此颜色框的关闭按钮。 我怎样才能在这里获得ok按钮的function？ 非常感谢任何人的帮助….在此先感谢…..
你不需要2个彩盒就可以了 。
你为什么不简单地创建一个div ，哪个类是message_content ，你根据ajax状态更新它的文本？
它好多了。
示例 ：
HTML ：
//@todo: change to colorbox id
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); }
根据此评论更新：
如果你想为不同的按钮使用相同的function，你必须为它们使用相同的class 。 这是你需要什么。
演示
我将一些ids更改为classes因此您不需要使用相同代码的2个事件。
这是拉斯维加斯版本 。
您可以看到，您可以存储每种颜色框的options ，然后传递它们的thrue参数。
我得到了答案，而fiddile显示了如何做到这一点…… ::: :)）））） http://jsfiddle.net/srinivaswaterdrop01/4vuDC/189/