jquery 插件, 自定义的confirm 弹出框

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

jquery 插件, 自定义 的confirm 弹出框

猜你喜欢

jquery 插件, 自定义的confirm 弹出框