<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <input type="button" id="btn" value="myConfirm"/> </body> </html>
(function($) { var curContent; $.extend ({ myConfirm: function (options, callback) { curContent = this; var divMaskStyle = "position:absolute;z-index:999;left:0px;top:0px;background-color:#000000;filter:Alpha(Opacity=50); -moz-opacity:0.5;opacity: 0.5;"; var divCntStyle = "position:absolute;width:500px; height:200px;z-index:1000;background-color:white;color: #666666;font-size: 14px;"; var divMsgStyle = "padding: 40px 80px 20px;height: 80px;line-height: 22px;"; var divBtnStyle = "text-align:center;"; var btnYesStyle = "width:120px;height: 30px;color: white; background-color: #FF6600;border: 1px;cursor:pointer;"; var btnNoStyle = "width:120px;height: 30px;margin-right:50px;border:1px;cursor:pointer;color: #333333;"; var btnYesText = options.btnYes.text ? options.btnYes.text : "确定"; var btnNoText = options.btnNo.text ? options.btnNo.text : "取消"; var msg = options.msg ? options.msg : "提示消息"; var divMask = document.createElement("DIV"); var divCnt = document.createElement("DIV"); var divMsg = document.createElement("DIV"); var divBtn = document.createElement("DIV"); var btnYes = document.createElement("BUTTON"); var btnNo = document.createElement("BUTTON"); $(divMask).attr({ style: divMaskStyle }).addClass("myMark"); $(divCnt).attr({ style: divCntStyle }).addClass("myMark"); $(divMsg).attr({ style: divMsgStyle }).html(msg); $(divBtn).attr({ style: divBtnStyle }); $(btnYes).attr({ style: btnYesStyle, href: "javascript:void(0);" }).html(btnYesText); $(btnNo).attr({ style: btnNoStyle, href: "javascript:void(0);" }).html(btnNoText); if (options.btnYes.class) { $(btnYes).addClass(options.btnYes.class); } if (options.btnNo.class) { $(btnNo).addClass(options.btnNo.class); } divCnt.appendChild(divMsg); divCnt.appendChild(divBtn); divBtn.appendChild(btnNo); divBtn.appendChild(btnYes); document.body.appendChild(divMask); document.body.appendChild(divCnt); $(divMask).show(); $(divCnt).show(); curContent.initMaskSize(divMask, divCnt); window.onresize = function () { curContent.initMaskSize(divMask, divCnt); } $(btnYes).unbind("click").click(function () { $(".myMark").remove(); callback("yes"); }); $(btnNo).unbind("click").click(function () { $(".myMark").remove(); callback("no"); }); }, initMaskSize: function (divMask, divCnt) { var width = $(window).width(); var height = $(window).height(); var cntLeft = (width - 500) / 2; cntLeft = cntLeft < 0 ? 0 : cntLeft; var cntTop = (height - 200) / 2; cntTop = cntTop < 0 ? 0 : cntTop; $(divMask).css({ width: width, height: height }); $(divCnt).css({ left: cntLeft, top: cntTop }); } }); })(jQuery); $("#btn").click(function() { var options = { btnYes: { text: "支付完成", class: "" }, btnNo: { text: "支付遇到问题", class: "" }, msg: "支付完成前,请不要关闭此支付验证窗口。<br/>支付完成后,请根据您支付的情况点击下面按钮。" }; $.myConfirm(options, function(r) { if(r == "yes") { alert("yes完成"); } else if(r == "no") { alert("no遇到问题"); } }); });
相关推荐
alert及confirm弹出框样式,换不错
主要介绍了jQuery UI插件自定义confirm确认框的方法,实例分析了jQuery的UI插件使用技巧,非常具有实用价值,需要的朋友可以参考下
alert和confirm弹出框样式美化,可自定义颜色和样式,无须调用浏览器自带弹框。
一款通过jquery实现的 Confirm 弹出提示框插件 , 兼容IE , FF ,界面美观, 好用
alert和confirm弹出框样式美化,可自定义颜色和样式,无须调用浏览器自带弹框。
jQuery自定义简单清爽的confirm确认对话框效果
Jquery自定义alert弹出框样式
自己研究出来的自定义删除确认弹出框,代码图片完整,可以直接运行。以此为基础可以做优美的自定义alert等其它想要的弹出框。好东西就要分享给大家。
自定义弹出框,包括alert弹出框、confirm弹出选择框、show消息提示框、dialog操作弹出框;
alert和confirm弹出框样式美化,可以自定义编辑弹框样式
介绍了插件jquery.confirm弹出确认消息的实现方法,感兴趣的小伙伴们可以参考一下
实现效果: ...大气绿色jQuery弹出框弹出层特效代码,支持三种弹出对话框模式,即提示信息、confirm确认、 alert提示三种弹框模式,特效代码基于jQuery实现,很不错的对话框,相比ArtDialog功能弱了点。效。
原生弹出框alert由于样式等问题被业界人士所讨厌。本例是基于jQuery进行扩展写出,alert和confirm(带确认和取消按钮并能触发回调函数)
本例详细介绍了自定义风格的confirm的实现,可以更好的与网页风格配套,实现多样化的confirm
jquery-confirm 消息弹出框插件的使用,有详细的注释,可以直接使用
JQ.jquery-confirm | 功能强大的jQuery对话框和确认取消框插件
NULL 博文链接:https://lingf.iteye.com/blog/1131554
下面小编就为大家带来一篇jquery mobile 实现自定义confirm确认框效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧