js实现点击div以外区域，隐藏div区域

页面刚开始刷新时，是显示的；
点击左侧按钮、其他区域或右侧关闭按钮都可以使其隐藏，再点击左侧按钮显示；

注：先引入jQuery版本
JS

<script type="text/javascript">
	$(function() {
		$('.showBtn').click(function(event) {
			//取消事件冒泡 
			event.stopPropagation();
			//按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。 
			$('.showMain').toggleClass('hide');
			return false;
		});
		$('.closeBtn').click(function(event) {
			//取消事件冒泡 
			event.stopPropagation();
			//按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。 
			$('.showMain').toggleClass('hide');
			return false;
		});
		//点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
		$(document).click(function(event) {
			var _con = $('.showMain'); // 设置目标区域
			if(!_con.is(event.target) && _con.has(event.target).length === 0) { // Mark 1
				//$('#divTop').slideUp('slow');  //滑动消失
				//$('.showMain').hide(1000); //淡出消失
				$('.showMain').addClass('hide');
			}
		});
	})
</script>

CSS

.showBtn {
	height: 220px;
    width: 60px;
    background-color: #f3f3f3;
    text-align: center;
    padding-top: 90px;
    box-sizing: border-box;
    position: fixed;
    left: 8px;
    bottom: 8px;
    z-index: 3;
}
.showBtn:hover {
	cursor: pointer;
}
.showMain {
	height: 200px;
	overflow: hidden;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1111111;
	transition: all 0.5s;
	animation: showMainMove 0.5s;
}
@keyframes showMainMove {
	from {
		left: -2000px;
	}
	to {
		left: 0;
	}
}
.showMain.hide {
	left: -2000px;
}
.showMain.show {
	left: 0px;
}
.showMain img {
	width: 100%;
	height: auto;
	opacity: 0.8;
}
.closeBtn{
	font-size: 30px;
	height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
	position: absolute;
    bottom: 140px;
    right: 50px;
    border: 1px solid #666;
    border-radius: 50%;
}
.closeBtn:hover{
	cursor: pointer;
}

HTML

<div class="wrap">
	<div class="showBtn">点击显示隐藏</div>
	<div class="showMain">
		<img src="qqq.jpg" alt="" />
		<div class="closeBtn">X</div>
	</div>
</div>

如有错误或不足，欢迎各位大佬评论指正。