2017 June 01 弹出层

弹出层实现

弹出层布局：

<div class="sy-dialog-wrapper">
  <div class="sy-dialog-mask"></div>
  <div class="sy-dialog-dialog">
    <div class="sy-dialog-title">
      title内容
      <b class="sy-dialog-close">[X]</b>
    </div>
    <div class="sy-dialog-content">
        content内容
    </div>
 </div>
</div>

.sy-dialog-wrapper{
	
}
.sy-dialog-mask{  /*遮罩层*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.4;
	filter:alpha(opacity=40);
}
.sy-dialog-dialog{
	width: 400px;
	
	z-index: 1;   /*需要定位*/
	position: relative;
	margin: 0 auto;  /*绝对定位不好使*/
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: #fff;
	top:100px;
}
.sy-dialog-title{
	height: 40px;
	line-height: 40px;
	background: #114a7b;
	color: #fff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.sy-dialog-close{
	color: #fff;
	float: right;
	margin-right:5px;
	cursor: pointer; 
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="mydialog.css">
</head>
<body>
	<button id="btn">open</button>
	<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="jquery.mydialog-1.0.js"></script>
	<script>
	$("#btn").on("click",function(){
		$(document.body).mydialog({
			title:'创建客户',
			content:"aaaaaaaaaa",
			width:400,
			height:300,
			isDragable:true
		});
	});
	</script>
</body>
</html>

/*jquery.mydialog-1.0.js*/
;(function($){
    $.fn.extend({
	mydialog:function(options){
		var settings = $.extend({
			isDragable:false,
			hasMask:true
		},options);

		/*？关闭时 打开的所有窗口全都关闭了*/
		var html = '<div class="sy-dialog-wrapper">'+
				   '<div class="sy-dialog-mask"></div>'+
				   '<div class="sy-dialog-dialog">'+
				   '<div class="sy-dialog-title">'+
				   settings.title+
				   '<b class="sy-dialog-close">[X]</b>'+
				   '</div>'+
				   '<div class="sy-dialog-content">'+settings.content+
				   '</div>'+
				   '</div>'+
				   '</div>';

		this.append(html);

		$(".sy-dialog-close").on("click",function(){  /*点击关闭按钮 关闭*/
			$(".sy-dialog-wrapper").remove();
		});

		$(".sy-dialog-mask").on("click",function(){  /*点击遮罩层 关闭*/
			$(".sy-dialog-wrapper").remove();
		});
	}
   });
		
})(jQuery);

$(function(){
    $('#btn').click(function(){  //点击 弹出层显示
        $('#box').css('display','block');
    });
     
    $(document).on('mousedown',function(e){  //点击外边 关闭
        if(  !$(e.target).is($('#btn')) && 
	     !$(e.target).is($('#box')) && 
	     $(e.target).parent('#box').length === 0
	  ){
        	$('#box').css('display','none');
        }
    });
});