我的通用弹出层之框架应用

我们在日常开发系统当中，弹出层是我们提高UED(用户体验）和方便交互的一个常用手段。由此可见，我们就需要封装一个通用的JS方法，方便调用。

废话到此，下面代码是我经常使用的弹出层，贴出来送给需要的人进行改造。

JavaScript:

 
 /** 弹出框
* vTitle: 弹出框标题
* vURL:弹出框内容
* triggerId: 触发弹出框的id，可选值
*/
function s_addPop(vTitle,vURL,triggerId){
    if($('#sPopWrap',window.parent.document).html()) return false; //如果有弹出框，则不触发
    var creatPop = function(){
        var s_popHtml = ''; //弹出框内容    
        s_popHtml += '<div  id="sPopWrapbg" class="hye_bg"></div><div id="sPopWrap"  class="hye"><div class="showDiv" ><div class="showDiv_L"></div><div class="showDiv_R"></div><div class="showDiv_C"><span>'+vTitle+'</span><a href="javascript:s_closePop()"></a></div></div>';
        s_popHtml += '<div class="showDiv_content"><div class="showDiv_content_L"></div><div class="showDiv_content_R"></div><div class="showDiv_content_C">'; //标题
        s_popHtml += '<div class="showDiv_content_C">';
        s_popHtml += '<iframe frameborder="0" id="sPopPage" name="sPopPage" style="width:100%;height:443px;"  scrolling="auto" src='+vURL+'></iframe>'; //内容
        s_popHtml += '</div></div><div class="showDiv_bottom"><div class="showDiv_bottom_L"></div><div class="showDiv_bottom_R"></div><div class="showDiv_bottom_C"></div> </div></div>';
        if(!triggerId || triggerId == ''){
            $('body', window.parent.document).append(s_popHtml);//父级显示弹出窗口

        }
        return s_popHtml;
    }

    if(triggerId) {
        $('#' + triggerId).click(function(){//点击弹出窗口
            var popWin = creatPop();
            $('body', window.parent.document).append(popWin);//父级显示弹出窗口


        });
    } else {
        creatPop();
    }
}

//关闭弹出窗口
function s_closePop() {
    $('#sPopWrapbg',parent.document).remove();
    $('#sPopWrap',parent.document).remove();
};


//调用方式 也可以$(function(){});绑定到按钮上
//function dd() {
//    s_addPop('员工列表', 'Untitled-1.html'); //弹出框 调用示例
//}

 示例代码下载：弹出层.zip

360浏览器极速模式 需要IIS容器运行才可以 兼容模式本地预览不需要
chrome 也是一样由于他们设置了本地保护机制需要 IIS运行即可
切记！