首页 新闻 会员 周边 捐助

JQUERY 自定义confirm,怎么知道用户点击的是确认按钮,还是取消按钮

0
悬赏园豆:50 [已解决问题] 解决于 2014-08-14 17:02

这里的showConfirm()只是将Confirm的框显示出来了,但如何得知用户点击的是哪个按钮呢,另外这个showConfirm()要做到可以多地多次调用,恳请各位大神指教下,不胜感激!

问题补充:

js代码

<script>

//width:确认框宽度, height:高度,title:确认框标题,msg:内容, btnVal:根据language,按钮上显示中文还是英文
showConfirm = function (width, height, title, msg, language) {
var btnYes = "Yes";
var btnNo = "No";
if (language == "cn") {
var btnYes = "确定";
var btnNo = "取消";
}

$("#confirmContainer").remove(); //用户防止客户重复点击,另外一种做法:可以给页面添加一个遮罩层,禁止用户操作
var messageBox = "<div id='confirmContainer' class='containerBox'>"
+ " <div id='confirmContainer_top' class='containerBox_top'>"
+ " <div id='confirmContainer_top_title' class='containerBox_top_title' >" + title + "</div>"
+ " <div id='confirmContainer_top_icon' class='containerBox_top_icon'>×</div>"
+ " <div id='confirmContainer_top_icon_bg' class='containerBox_top_icon_bg'>×</div>"
+ " </div>"
+ " <div id='confirmContainer_content' class='containerBox_content'>"
+ " <table>"
+ " <tr>"
+ " <td style='width:66px; text-align:center;'><img src='../image/question.png'/></td>"
+ " <td id='td_confirm' style='text-align:center;'>" + msg + "</td>"
+ " </tr>"
+ " </table>"
+ " </div>"
+ " <div class='containerBox_bottom'>"
+ " <input type='button' id='btn-yes' class='containerBox_btn' value='" + btnYes + "'/> "
+ " <input type='button' id='btn-no' class='containerBox_btn' value='" + btnNo + "'/> "
+ " </div>"
+ "</div>";
$("body").append(messageBox).append("<div class='containerBox_coverLayer'></div>"); //containerBox_coverLayer遮罩层
var confirmContainer_margin = "-" + parseInt(height) / 2 + "px" + " 0 0 " + "-" + parseInt(width) / 2 + "px";
var confirmContainer_content_height = (parseInt(height) - 65) + "px";
$("#confirmContainer").css({ "width": width, "height": height, "margin": confirmContainer_margin });
$("#confirmContainer_content").css("height", confirmContainer_content_height);
$("#confirmContainer_content table").css("height", (parseInt(height) - 73) + "px");

$("#confirmContainer_top_icon").mouseover(function () {
$("#confirmContainer_top_icon_bg").fadeIn(400);
});

$("#confirmContainer_top_icon_bg").mouseout(function () {
$("#confirmContainer_top_icon_bg").fadeOut(400);
});

$("#confirmContainer_top_icon_bg,#btn-confirm").click(function () {
$("#confirmContainer").css("display", "none");
//关闭提示框的同时,要将提示框给删除 & 去掉遮罩层
$("#confirmContainer").remove();
$(".containerBox_coverLayer").remove();
});
}

</script>

流光溢辉的主页 流光溢辉 | 初学一级 | 园豆:60
提问于:2014-08-14 11:43
< >
分享
最佳答案
0

系统自带的Confirm不能满足你的需求吗?

收获园豆:30
晓菜鸟 | 老鸟四级 |园豆:2594 | 2014-08-14 13:21

alert自定义了,索性confirm也一起自定义啊,况且系统自带的Confirm在各个浏览器下展示的不一样,自定义统一风格,还美观

流光溢辉 | 园豆:60 (初学一级) | 2014-08-14 13:50

@流光溢辉: 哦哦,确实,这样更好吧,点击的时候,判断事件源,根据自己的标识来确定是哪个按钮,然后做对应的操作呗。

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-08-14 13:58

@晓菜鸟: 那这个事件源怎么判断呢

流光溢辉 | 园豆:60 (初学一级) | 2014-08-14 14:00

@晓菜鸟: 我的qq:790104044 ,咱们能否加Q详聊,这个交流起来不太方便,Thanks

流光溢辉 | 园豆:60 (初学一级) | 2014-08-14 14:04

@流光溢辉: event.srcElement.innerHTML.

参考一下,还有很多其他的属性,你可以根据自己的需要取值.

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-08-14 14:05

@流光溢辉: 上班时间呢,公司不允许上QQ,你具体什么问题说清楚,我可以帮你看看。

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-08-14 14:11

@晓菜鸟:

//A页面调用showCofirm,当然B页面也可以调用,做到多地方共用,

//苦于不知怎么获取用户点击的是确定还是取消

if(showConfirm(“240px”,"160px", "提示", “是否删除?”, “cn”) ){
//删除操作
//alert("删除成功!");
}
我就是想做成类似系统自带的confirm这样
if(confirm("是否删除")){
//删除操作
//alert("删除成功!");
}

流光溢辉 | 园豆:60 (初学一级) | 2014-08-14 14:15

@流光溢辉: 我看看你的showConfirm里面怎么写的。

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-08-14 14:25

@流光溢辉: 你这方法是不还没写完?你要做成公共的,那你的删除操作打算怎么写?异步的话你不得传Url和请求方式吗?

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-08-14 14:29

@晓菜鸟: 对啊,我也觉得我写的不对,我这个只是将confirm的框展示出来了

流光溢辉 | 园豆:60 (初学一级) | 2014-08-14 14:30

@流光溢辉: 你这个是要做成删除功能能公共调用的,还是所有功能都能公共调用的?如果所有功能都要公共调用的话,那你还得考虑返回什么的情况。

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-08-14 14:44

@晓菜鸟: 我就是想做成跟系统自带的confirm一样,只要导入这个js,在哪都能用

流光溢辉 | 园豆:60 (初学一级) | 2014-08-14 14:47

@流光溢辉: 嗯,这个也能做,你把要执行什么操作(比如删除、修改)单独写成一个方法,连同返回提示也一起写,然后调用的时候多传入一个自己定义好的Js方法应该能行。你可以试试。

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-08-14 15:03

@晓菜鸟: 我还是不太明白,有具体代码么

流光溢辉 | 园豆:60 (初学一级) | 2014-08-14 15:26

@晓菜鸟: 这个问题纠结我两天了,刚刚解决了,重要的在于js的eval()这个方法,可以将字符串转成函数执行。

非常感谢你,跟我耐心沟通了这么久

流光溢辉 | 园豆:60 (初学一级) | 2014-08-14 17:00

@流光溢辉: 没事,大家都是程序猿,理应互相帮助,问题解决了就好。

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-08-14 17:07

@晓菜鸟: 大侠,在哪个城市办公,我在深圳

流光溢辉 | 园豆:60 (初学一级) | 2014-08-14 17:09

@流光溢辉: 额,叫我晓菜鸟就行,目前在北京,我挺多同学在深圳的。

晓菜鸟 | 园豆:2594 (老鸟四级) | 2014-08-14 17:10
其他回答(2)
1

script>jConfirm('您的密码修改成功,是否继续修改?','提示信息',function(r){if(r){location=location}else{history.back();}});</script>

Confirm("是否删除?","提示信息",function(r){

  if(r){

    //true

  }else{

    //flase

  }

});

收获园豆:10
骑着蜗牛耍流氓 | 园豆:135 (初学一级) | 2014-08-14 12:33
0

点击的时候,判断事件源,根据自己的标识来确定是哪个按钮了。楼上的调用方式更好~

收获园豆:10
幻天芒 | 园豆:37205 (高人七级) | 2014-08-14 12:49

可否用具体代码展示,多谢!

支持(0) 反对(0) 流光溢辉 | 园豆:60 (初学一级) | 2014-08-14 12:59

@流光溢辉: 可以参考artDialog的实现。这是个LGPL开源的弹出框。

支持(0) 反对(0) 幻天芒 | 园豆:37205 (高人七级) | 2014-08-14 14:46
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册