<!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遇到问题"); } }); });