jQuery-优雅弹窗（模态框）

  通常单纯用display写出来的弹窗会稍微有点卡顿，这里使用可见度、透明度和比例写的。稍微好一点，过渡比较自然，也可按照个人风格进行调试。visibility、opacity、scale。

visibility: hidden 效果相当于 display:none，能把元素隐藏起来，但两者的区别在于：
  1、display:none 元素不再占用空间。
  2、visibility: hidden 使元素在网页上不可见，但仍占用空间。

HTML

<button>触发弹窗</button>
		
<div class="madel">
	<div class="content">
		
	</div>
</div>

CSS

* {
padding: 0;
	margin: 0;
}

.madel {
	width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 999;
    transition: all 0.3s;
    cursor: pointer;
}

.content {
	width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -175px;
    background-color: #fff;
    transition: all 0.3s;
    border-radius: 10px;
    transform: scale(0.5);
}

button {
	outline: none;
	border: none;
	display: block;
	width: 100px;
	height: 50px;
	margin: 100px auto;
	background-color: #FFC25A;
	color: #FFFFFF;
	border-radius: 8px;
	cursor: pointer;
}

jQuery

//定义弹出二维码的函数
$("button").click(function(){
	$('.madel').css('visibility', 'visible');
	$('.madel').css('opacity', '1');
	$('.content').css('transform', 'scale(1)');
})

//关闭加入我们的二维码
$('.madel').click(function() {
	$('.madel').css('visibility', 'hidden');
	$('.madel').css('opacity', '0');
	$('.content').css('transform', 'scale(0.5)');
});