当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » JavaScript  » 常用工具方法
v1-alpha

简单的弹出框

v1-alpha 发布于 2016年06月16日 20时, 0评/319阅
分享到: 
收藏 +0
0
依赖jquery,简单的弹出框,支持iframe和ajax-div,动态设值button。没有用jquery插件机制
标签: <无>

代码片段(2) [全屏查看所有代码]

1. [代码][JavaScript]代码     跳至 [1] [2] [全屏预览]

// Add semicolon to prevent IIFE from being passed as argument to concatenated code.
;
// UMD (Universal Module Definition)
// see https://github.com/umdjs/umd/blob/master/returnExports.js
(function (root, factory) {
    /* global define, exports, module */
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like enviroments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.PopBox = factory();
  }
}(this, function () {
	var PopBox=function(config){
		
		$.extend(true,this,PopBox.DEFAULT);
		$.extend(true,this,config);
		
		PopBox.idIndex++;
		this.id='popbox-'+PopBox.idIndex;
		!this.$parent&&(this.$parent=$('body'));
		this.btnFuns={};
		
		this.init();
	};
	PopBox.DEFAULT={
		mode:'iframe'		
	};
	PopBox.idIndex=0;
	PopBox.templateIframe='<iframe  border=0 align="middle" FRAMEBORDER=0 marginheight=0 '+
    					'marginwidth=0  scrolling="auto"  width="100%" ></iframe>';
	PopBox.template='<div class="popbox-container">'+
        '<div class="popbox-mask"></div>'+
        '<div  class="popbox-box">'+
		'	<h2 class="popbox-header"></h2>'+
		'	<div class="popbox-close"></div>'+
        '   <div class="popbox-body">'+
        '   </div>'+
        '<div class="popbox-btns"></div>'+
        '</div>'+
    '</div>';
	PopBox.classes=['popbox-container','popbox-mask','popbox-box','popbox-header','popbox-close','popbox-body','popbox-btns'];
	PopBox.prototype={
		render:function(){
			var $div=$('<div>'+PopBox.template+'</div>'),
				that=this;
			this.$div={};
			$.each(PopBox.classes,function(index,clsName){
				var $ele=$('.'+clsName,$div);
				that.$div[clsName]=$ele;
				that['css-'+clsName]&&$ele.css(that['css-'+clsName]);
			});
			if(this.mode=='iframe')
			{
				this.$div['popbox-body'].append(PopBox.templateIframe);
				this.$iframe=$('iframe',this.$div['popbox-body']);
			}
			//渲染button
			this.setButtons(this.buttons);
			
			this.$div['popbox-container'].attr('id',this.id);
			this.$div['popbox-header'].html(this.title)
			this.$parent.append(this.$div['popbox-container']);
		},
		setButtons:function(buttons){
			this.buttons=buttons;
			this.btnFuns={};
			var $btns=this.$div['popbox-btns'],btnHtml=[],that=this;
			$btns.empty();
			
			this.buttons&&$.each(this.buttons,function(index,btn){
				btnHtml.push('<input type="button" id="popbox-btn-'+btn.code+'" value="'+btn.name+'" class="btn">');
				that.btnFuns[btn.code]=btn.onclick;
			});
			$btns.append(btnHtml.join(''));
		},
		bind:function(){
			var that=this;
			this.$div['popbox-close'].on('click',function(){
				that.close();
			});
			this.$div['popbox-btns'].on('click','.btn',function(e){
				var fun=that.btnFuns[this.id.split('popbox-btn-')[1]];
				fun&&fun(e);
			});
		},
		sync:function(){
			this.url&&this.load();
		},
		close:function(){
			this.$div['popbox-container'].css('display','none');
		},
		show:function(){
			var $btns=this.$div['popbox-btns'],
				height=this.$div['popbox-box'].height()-this.$div['popbox-header'].height();
			
			if(this.buttons)
			{
				$btns.css('display','block');
				height-=$btns.height();
			}	
			else
				$btns.css('display','none');
			
			this.$iframe.attr('height',height);
			this.$div['popbox-container'].css('display','block');
		},
		load:function(url,title){
			this.url=url=url||this.url;
			this.title=title=title||this.title;
			
			if(this.mode=='iframe')
				this.$iframe.attr('src',url);
			else
				this.$div['popbox-body'].load(url);
			title&&this.$div['popbox-header'].html(title);
			this.title=title;
			this.show();
		},
		init:function(){
			this.render();
			this.bind();
			this.sync();
		}
	};
	return PopBox;
}));
/***
 * demo1:
 *     var popBox=new PopBox({
 *         	title:'资源查询',
 *         	'css-popbox-box':{width:'70%'}
 *     });
 *     popBox.load('http://localhost.fjsq.org/resInfo/main.jhtml');
 *     
 * demo2:
 * 		var popBox=new PopBox({
 * 		    	title:'资源查询',
 * 		    	url:'http://localhost.fjsq.org/resInfo/main.jhtml',
 * 		    	'css-popbox-box':{width:'70%',height:500}
 * 		    });
 * 		popBox.setButtons([{
 * 					code:'apply',
 * 					name:'申请',
 * 					onclick:function(event){
 * 						popBox.setButtons();
 * 					}
 * 				}]);
 * 
 * config={
 * 		$parent:父节点的$
 * 		mode:'iframe'|'div',
 * 		title:xxx,
 * 		buttons:[{
 * 			code:''
 * 			name:'',
 * 			onclick:function(event){
 * 	
 * 			}
 * 		}],
 * 		url:
 * 		css-popbox-container:{}
 * 		css-popbox-mask:{}
 * 		css-popbox-box:{}
 * 		css-popbox-header:{}
 * 		css-popbox-close:{}
 * }
 */

2. [代码][CSS]代码     跳至 [1] [2] [全屏预览]

.popbox-container{
    position:fixed;
    top:0;bottom:0;left:0;right:0;
    z-index:200;	
    display: none;
}

.popbox-btns{
	height:50px;
	text-align: center;
	background:#f5f5f5; 
	border-top:1px solid #cfcece;
}

.popbox-btns .btn{
	margin:10px;
    width: 140px;
    height: 30px;
    display: inline-block;
    background: #2d73cd;
    border-radius: 2px;
    color: #fff;
    border: none;
    padding: 5px 20px;
    cursor: pointer;
}

.popbox-mask{
	background-color:rgb(51, 51, 51);
	z-index:-1;
	opacity:0.57;
	filter:alpha(opacity=57);
	position:absolute;
	top:0;bottom:0;left:0;right:0;
}

.popbox-box{
	width:80%; 
	margin:0 auto; 
	background:#fff; 
	box-shadow: 0 0 10px #e5e5e5;
	border:1px solid #cfcece;
	margin-top:50px;
	height:400px;
	position: relative;
}

.popbox-header{
	font-size:16px; 
	background:#f5f5f5; 
	height:45px; 
	line-height:45px; 
	padding-left:10px; 
	border-bottom:1px solid #cfcece;
}


.popbox-close{
	background-image: url("data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAclBMVEUAAABUbnpMZG9UbnpUbnpUbnpMZG9MZG9MZG9UbnpUbnpUbnpMZG9MZG9MZG9UbnpUbnpUbnpUbnpMZG9MZG9MZG9MZG9UbnpMZG9UbnpMZG9TbXlNZXBUbnpUbnpMZG9MZG9UbnpMZG9TbXhNZXD////JeuxdAAAAIXRSTlMAAAACCwEBCwJIrTExrUgKrMovL8qsCjAwLS3R0S7R0S4eePpJAAAAAWJLR0QlwwHJDwAAAHFJREFUKM+9kEUOgAAMBGlxd3f5/xsJRQMpN+ipmUkqKwg/FYiSDGuLiqrhwUE3TCCDaNkO7gZcr/eDxSCG0RAnh4DUJ0M8yvAyKyBDPDz5bvLizjdTVg++mLoZp7a7c1Zwo7jl3Lnsgy+RMCGysX9dMzEEC0NcbUT0AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE1LTA3LTI1VDIxOjUwOjE4KzA4OjAwovW56QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMi0xMFQxNTo1Nzo0MSswODowMDXSSngAAABOdEVYdHNvZnR3YXJlAEltYWdlTWFnaWNrIDYuOC44LTEwIFExNiB4ODZfNjQgMjAxNS0wNy0xOSBodHRwOi8vd3d3LmltYWdlbWFnaWNrLm9yZwUMnDUAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADEyOEN8QYAAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgAMTI40I0R3QAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNDE4MTk4MjYx8p3DWQAAABF0RVh0VGh1bWI6OlNpemUAOTQ0QkI71qP+AAAAWnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L3d3dy5lYXN5aWNvbi5uZXQvY2RuLWltZy5lYXN5aWNvbi5jbi9zcmMvMTE4MTcvMTE4MTc1Ny5wbmc+xoIhAAAAAElFTkSuQmCC");
	width: 24px;
	height: 24px;
	position: absolute;
	top:10px;
	right:10px;
	cursor: pointer;
}


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

开源从代码分享开始 分享代码
v1-alpha的其它代码 全部(11)...