站内共用弹窗及模块扩展

网站用到弹窗已经不是什么稀奇的事情了，并且在站内很多页面都用到了大小不一及需求不同的弹窗，so今天就在这里聊一下站内弹窗共用的问题。（兼容各大主流浏览器，但无视IE6）

页面大致是这样的，常见的商品操作列表，列表内每个商品通常有诸多“增删改查”按钮，而这时也就伴随着弹窗的出现。
现在看下列表的html代码：

<div class="productDiv" id="product01">
    <span>商品一</span>
    <a class="delete" title="删除" href="javascript:;">删除按钮</a>
    <a class="collect" title="收藏" href="javascript:;">收藏按钮</a>
</div>
<br/>
<div class="productDiv" id="product02">
    <span>商品二</span>
    <a class="delete" title="删除" href="javascript:;">删除按钮</a>
    <a class="collect" title="收藏" href="javascript:;">收藏按钮</a>
</div>
<br/>
<a class="closePage" title="离开页面" href="javascript:;">离开页面</a>

接下来我们为页面添加公共的阴影遮罩及弹窗

<div class="shade"></div>
<!--共用弹窗-->
<div class="popupTemplate">
    <h6>www.evaWeb.com上的网页提示</h6>
    <a class="popupBtnClose" href="javascript:;" title="关闭">X</a>
    <div class="popupContent">
        <p class="popupTxt"></p>
        <a class="popupBtnSure" href="###">确 定</a>
        <a class="popupBtnCancel" href="javascript:;">取 消</a>
    </div>
    <div class="popupState">
        <input type="hidden" id="operateTxt" />
        <img src="images/popupState.gif" />
        <p class="popupTxt"></p>
    </div>
</div>

页面样式如下：

@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,
section,article,aside,header,footer,nav,dialog,figure{margin:0;padding:0;font-style:normal;font-weight: normal;font-family:"microsoft yahei","Microsoft YaHei UI"}
i,em,b{font-style:normal}
table {border-collapse:collapse;border-spacing:0}
ul,ol,li {list-style:none}
textarea{resize:none;outline: none;overflow-y:hidden;}
input {vertical-align:middle;}
img {vertical-align:middle;border:none;}
input:focus {outline:none}
form {resize: none;outline:none;position:relative;z-index:2}
a {color:#333;text-decoration:none;outline:none}
a:hover {color:#bf0000;}
body {font-family:"microsoft yahei","Microsoft YaHei UI",sans-serif;font-size:14px;color:#333}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:block}
.clear {clear:both}


.productDiv,
.closePage {
    margin: 20px;
}
.productDiv a,
.productDiv a:hover,
.closePage,
.closePage:hover {
    background: #bf0000;
    color: #fff;
    border: 1px solid #bf0000;
}
/*弹窗及遮罩（共用）*/
.shade {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.popupTemplate {
    display: none;
    position: fixed;
    z-index: 11;
    background: #fff;
    border: 1px solid #ffd9d9;
    text-align: center;
}
.popupTemplate h6 {
    width: 100%;
    height: 43px;
    line-height: 43px;
    background: #bf0000;
    color: #fff;
    font-size: 16px;
}
.popupTemplate p {
    line-height: 30px;
    padding: 35px 0;
    font-size: 20px;
    color: #000;
    text-align: center;
}
.popupTemplate a.popupBtnClose {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    color: #f8e2e2;
}
.popupTemplate a.popupBtnSure, 
.popupTemplate a.popupBtnCancel {
    display: inline-block;
    width: 93px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 16px;
    background: #f29510;
    color: #fff;
}
.popupTemplate a.popupBtnCancel {
    margin-left: 40px;
    background: #767676;
}
/*弹窗状态板块popupState*/
.popupState img {
    margin: 30px 0 -10px;
}
.popupState p {
    font-weight: bold;
    color: #333;
}

页面事先引用了jquery 文件，接下来我们要为页面添加比较重要的功能部分了，这部分js代码可以添加到页面公用的js里，等使用弹窗时直接调用就好了

//弹框时调用 popupShowFn($Dom为点击的目标节点，
//$width为出现弹窗宽度，
//$height为出现弹窗高度，
//shade为是否出现阴影遮罩，0为不出现，1为出现
//popupMode为出现弹窗的模式，目前为popupMode1及popupMode2两种
//$popupTxt为弹窗内预留字段，用来更改弹窗内需要的内容
//$nextPopup为是否需要出现下级弹窗，0为不需要下级弹窗，直接触发关闭。1为需要触发下级弹窗 )
function popupShowFn($Dom ,$width, $height, shade, popupMode, $popupTxt, $nextPopup){
    var $domWidth = $(document).width(),
        $domHeight = $(document).height(),
        $winWidth = $(window).width(),
        $winHeight = $(window).height(),
        $ScrollHeight = $(document).scrollTop(),
        $ScrollWidth = $(document).scrollLeft();
    if (!!shade) {
        $(".shade").width($domWidth)
                   .height($domHeight)
               .show();
    }
    $($Dom).width($width)
       .height($height)
       .css({"top":($winHeight-$height)/2 + "px",
         "left": ($winWidth-$width)/2 + "px"});
    if (popupMode == "popupMode1") {
        $($Dom).children(".popupContent").css("display", "block")
                                 .find(".popupTxt").text($popupTxt);
    $($Dom).children(".popupState").css("display", "none");
    } else {
       $($Dom).children(".popupContent").css("display", "none");
    $($Dom).children(".popupState").css("display", "block")
                       .find(".popupTxt").text($popupTxt);
    }
    if ($nextPopup == 0) {
    $(".popupBtnSure").addClass("close");
    }
    $($Dom).show();
}
$(function(){
    //点击弹框关闭按钮
    $(".popupBtnClose").click(function(){
        $(".popupBtnSure").removeClass("close");
        $(".shade").hide();
        $(".popupTemplate").hide();
    });
    //点击弹框取消按钮
    $(".popupBtnCancel").click(function(){
        $(".shade").hide();
        $(".popupTemplate").hide();
    });
});

最后我们来添加页面内具体的功能执行代码，也就是弹窗的出现的执行代码哦

$(function(){
    var $id;//$id为商品列表内的商品id，此处预先声明，可根据实际需要决定是否保留
    //点击列表内“删除/收藏按钮”出现弹框，设定弹窗宽度375px,高度200px,shade为1出现遮罩,popupMode为模式一（popupMode1），
        //$popupTxt为“确认删除/收藏”，$nextPopup为1需要出现下级弹窗
    $(".productDiv a").click(function(){
        $id = $(this).parents("div").attr("id");
        $("#operateTxt").val($(this).attr("class"));
        if ($(this).attr("class") == "delete") {
            //popupShowFn($Dom ,$width, $height, shade, popupMode, $popupTxt, $nextPopup);
            popupShowFn(".popupTemplate", 375, 220, 1, "popupMode1", "您确认删除么？", 1);
        } else {
            popupShowFn(".popupTemplate", 375, 220, 1, "popupMode1", "您确认收藏么？", 1);
        }
    });
    //点击弹窗内“确定”按钮，根据该按钮有没有“close”,判断页面是否需要出现下级弹窗
    $(".popupBtnSure").on("click", function(){
        if (!$(this).hasClass("close")) {
            $("#" + $id).parent(".ucTemplateTxt").remove();
            //$.ajax();//假设返回成功
            if ($("#operateTxt").val() == "delete") {
                //设定弹窗宽度375px,高度200px,shade为1出现遮罩,popupMode为模式二（popupMode2），
                //$popupTxt为“已删除/已收藏”，$nextPopup为0不需要出现下级弹窗
                popupShowFn(".popupTemplate", 375, 220, 1, "popupMode2", "恭喜您，已删除！", 0);
            } else {
                popupShowFn(".popupTemplate", 375, 220, 1, "popupMode2", "恭喜您，已收藏！", 0);
            }
        } else {
            //1、执行相关动作
            
            $(".popupBtnClose").click();//2、触发弹窗关闭按钮使弹窗消失
        }
    });
    $(".closePage").click(function(){
        //设定弹窗宽度500px,高度300px,shade为0不出现遮罩,popupMode为模式一（popupMode1），
        //$popupTxt为“已删除/已收藏”，$nextPopup为0不需要出现下级弹窗
        popupShowFn(".popupTemplate", 500, 300, 0, "popupMode1", "您确认离开页面么？", 0);
    });
});

这样就OK了，让我们来看下，弹窗出现的效果--

点击“删除”按钮出现

点击该弹窗“确认”后

点击“收藏”按钮出现

点击该弹窗“确认”后

点击“离开页面按钮”，此时是没有遮罩的噢！

看，非常自然！

在这里在啰嗦一句，这个模块只适用于网站弹窗出现较多的情况，所以模块共用，如果页面只用到很少的弹窗，也就没有那么大必要啦！偷笑偷笑~~