<!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; }; };