exp.popups.js

弹出窗

 

css

/*遮罩层*/
.expP_shade { position: absolute; top: 0; left: 0; z-index: 98; background-color: #000; opacity: .20; filter: alpha(opacity=20); width: 100%; height: 100%; }
/*expP.eAlert*/
.expP_alert { border: 1px solid #333e4d; background-color: white; width: 240px; z-index: 99; }
.expP_alert .title { background-color: #aaf88a; padding-left: 4px; font-size: 14px; height: 24px; line-height: 24px; }
.expP_alert .body { text-align: center; padding: 16px 8px; word-wrap: break-word; }
.expP_alert .btndiv { text-align: center; }
.expP_alert .btndiv .btn { display: block; margin: 4px auto; text-align: center; cursor: pointer; width: 70px; height: 30px; line-height: 30px; background-color: #34b36e; }

/*expP.eConfirm*/
.expP_confirm { border: 1px solid #333e4d; background-color: white; width: 240px; z-index: 99; }
.expP_confirm .title { background-color: #aaf88a; padding-left: 4px; font-size: 14px; height: 24px; line-height: 24px; }
.expP_confirm .body { text-align: center; padding: 16px 8px; word-wrap: break-word; }
.expP_confirm .btndiv { margin: 0 auto; text-align: center; }
.expP_confirm .btndiv .btnYes { text-align: center; margin: 4px auto; cursor: pointer; display: inline-block; width: 70px; height: 30px; line-height: 30px; background-color: #34b36e; }
.expP_confirm .btndiv .btnNo { text-align: center; margin: 4px auto; cursor: pointer; display: inline-block; width: 70px; height: 30px; line-height: 30px; background-color: #bebcbc; margin-left: 12px; }

/*exp.eTip*/
.exp_tip { display: inline; padding: 4px; font-size: 12px; position: absolute; z-index: 99; background-color: antiquewhite; border: 1px solid #ebe3c0; color: red; }

js

/// <reference path="/Scripts/expand-fn/exp.popups.js" />
/*通用提示框*/
var expP = new Array();
/*弹窗居中*/
expP.eCenter = function (element) {
    var scrollTop = $(window).scrollTop();//滚动条顶部偏移
    var winH = $(window).height();//窗口高
    var wrapT = (element.height() > winH ? 0 : (winH - element.height()) / 2) + scrollTop;//(窗口高-弹窗高)/2 + 滚动条垂直偏移
    var wrapL = ($(window).width() - element.width()) / 2;//(窗口宽-弹窗宽)/2
    element.css({ top: wrapT + "px", left: wrapL + "px", position: "absolute" });
    $(window).scroll(function () {
        var top = (element.height() > winH ? 0 : (winH - element.height()) / 2) + $(window).scrollTop();
        element.css({ top: top + "px", left: wrapL + "px" });
    });
}
/*遮罩层*/
expP.eShade = function () {
    $("body").append("<div class=expP_shade></div>");
    $(".expP_shade").css("height", $(document).height());
}
/*alert*/
expP.eAlert = function (txt, title) {
    var titleDiv = "<div class=title>" + title + "</div>";
    var bodyDiv = "<div class=body>" + txt + "</div>";
    var btnDiv = "<div class=btndiv><span class=btn>确定</span></div>";
    $("body").append("<div class=expP_alert>" + (title == null ? "" : titleDiv) + bodyDiv + btnDiv + "</div>");
    expP.eShade();
    expP.eCenter($(".expP_alert"));
    $(".expP_alert .btndiv .btn").live("click", function () {
        $(".expP_alert,.expP_shade").remove();
    }).unbind("click");
}
/*confirm*/
expP.eConfirm = function (txt, title, fn) {
    var titleDiv = "<div class=title>" + title + "</div>";
    var bodyDiv = "<div class=body>" + txt + "</div>";
    var btnDiv = "<div class=btndiv> <span class=btnYes >确定</span><span class=btnNo>取消</span></div>";
    $("body").append("<div class=expP_confirm>" + (title == null ? "" : titleDiv) + bodyDiv + btnDiv + "</div>");
    expP.eShade();
    expP.eCenter($(".expP_confirm"));
    $(".expP_confirm .btndiv .btnNo").live("click", function () {
        $(".expP_confirm,.expP_shade").remove();
    });
    $(".expP_confirm .btndiv .btnYes").live("click", function () {
        $(".expP_confirm,.expP_shade").remove();
        fn();
    });
}

/*tip*/
expP.eTip = function (element, txt) {
    var eId = $(element).attr("id") + "_tip";
    if ($("#" + eId).length != 0) { return; }
    var span = "<span id=" + eId + " class=exp_tip>" + txt + "</span>";
    $("body").append(span);
    var top = element.offsetTop;
    var left = element.offsetLeft;
    var width = $(element).width();
    $("#" + eId).css({ "top": top, "left": left + width + 12 });
}
expP.eTip.remove = function (element) {
    $("#" + $(element).attr("id") + "_tip").remove();
}

 

例子

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <link href="~/Scripts/expand-fn/exp.popups.css" rel="stylesheet" />
    <script src="~/Scripts/expand-fn/exp.popups.js"></script>
</head>
<body>
    <button onclick="expP.eAlert('你是个天才!')">alert</button>
    <button onclick="expP.eAlert('你是个天才!','提示')">alert</button>
    <button onclick="expP.eConfirm('你是个天才!', '提示', function () { alert();})">confirm</button>
    <input onblur="expP.eTip(this, '随便输入');" onfocus="expP.eTip.remove(this)" />
</body>
</html>