原生JS 弹窗组件

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="popup.css" rel="stylesheet">
</head>

<body>

<div id="popup-mask"></div>
<div id="popup"></div>

<script src="popup.js"></script>
<script>
popup({
    id : 'popup',    // 元素id 必须 可换成其他id名 同时需更换css文件中的样式名
    width : 500,    // 弹窗宽度 默认500 非必须
    height : 400,    // 弹窗高度 默认400 非必须
    background : '#fff',    // 背景色 默认白色 非必须
    borderRadius : 'round',    // 默认圆角 直角为rect 非必须
    borderRadiusPx : 4,        // 圆角默认4px 直角为0
    maskId : 'popup-mask',    // 遮罩id 必须 可换成其他id名 同时需更换css文件中的样式名
    maskOpacity : 0.5        // 遮罩默认透明度0.5 
});

// popup({ id : 'popup', maskId : 'popup-mask'}); 只传id 效果一样
</script>
</body>
</html>

 

/*
    popup.css 弹窗默认样式
*/

body{ margin:0;}

#popup-mask{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#000;
}

#popup{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

 

/*
    @desc         popup 弹窗组件
*/

function popup( object ){
    
    var id = object.id || 'popup',
        width = object.width || 500,
        height = object.height || 400,
        background = object.background || '#fff',
        borderRadius = object.borderRadius || 'round',
        borderRadiusPx = object.borderRadiusPx || 4,
        maskId = object.maskId || 'popup-mask',
        maskOpacity = object.maskOpacity || 0.5;
        
        
    var obj = document.getElementById( id ),
        maskObj = document.getElementById( maskId );
    
    obj.style.width = width + 'px';
    obj.style.height = height + 'px';
    obj.style.background = background;
    
    if( borderRadius === 'round' ){
        obj.style.borderRadius = borderRadiusPx + 'px';
    }else if( borderRadius === 'rect' ){
        obj.style.borderRadius = 0;
    };
    
    if( window.navigator.userAgent.toLowerCase().indexOf('ie') !== -1 ){
        // ie 浏览器
        maskObj.style.filter = 'alpha(opacity:'+(maskOpacity*100)+')';
    }else{
        maskObj.style.opacity = maskOpacity;
    };
    
};

 

posted @ 2016-07-08 15:48  __枫伊飘渺  阅读(896)  评论(0)    收藏  举报