jquery 点击弹出对话框显示隐藏遮罩层

描述

点击输入框，弹出修改内容框和遮罩层，进行修改，点击确定按钮，将修改的内容更新到输入框中，点击取消按钮，关闭对话框和遮罩层。

CSS

<style>
	*{
		padding: 0;
		margin: 0;
	}
	:focus{
    outline: 0;
	}
	.content {

		margin-left: 400px;
		margin-top: 200px;
		height: 100px;
		line-height: 90px;
		/*text-align: center;*/
	}
	.textarea {
		vertical-align: middle;
	}
	.miss {

		width: 400px;
		height: 390px;
		margin: 0 auto;
		background-color: #fff;
		top: 120px;
		left: 0;
		right: 0;
		bottom: 0;
		border: 1px #ccc solid;
		position: absolute;
		z-index: 999;

	}
	.miss h4 {
		height: 40px;
		line-height: 40px;
		background-color: #F8F8F8;
		margin-bottom: 15px;
		font-weight: 200;
		font-family: '微软雅黑';
		padding-left: 15px;
		
	}
	.srk {
		height: 280px;
		width: 370px;
		margin-left: 15px;
	}
	#textarea {
		height: 280px;
		width: 100%;
		
	}
	.anz {
		width: 370px;
		margin: 0 auto;
		text-align: center;
		margin-top: 15px
	}
	.anz button {
		width: 80px;
		height: 30px;
		border: none;
		color: #fff;
		cursor: pointer;
	}
	.qued {
		background-color: #34A8FF;
	}
	.qux {
		background-color: #FF6838;
	}
	.shadow {
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		position: absolute;
		z-index: 900;
		background-color: #000;
		opacity: 0.6;
		display: none;
	}
	</style>

HTML

	<!-- 输入框 -->
	<div class="content">
		请输入内容：<textarea class="textarea"></textarea>
	</div>
	<!-- 修改框 -->
	<div class="miss" style="display: none;">
		<h4>修改内容</h4>
		<div class="srk">
			<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
		</div>
		<div class="anz">
			<button class="qued">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button class="qux">取消</button>
		</div>
	</div>
	<!-- 遮罩层 -->
	<div class="shadow"></div>

JS

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//点击输入框，弹出修改对话框和遮罩层，并将输入框的内容复制到修改框中。
	$('.textarea').click(function(){
		$('.miss').show(400);
		$('.shadow').css('display','block');
		var textarea1=$('.textarea').val();
		$('#textarea').val(textarea1);
	})
	//点击取消按钮，关闭修改对话框和遮罩层。
	$('.qux').click(function(){
		$('.miss').hide(400);
		$('.shadow').css('display','none');
	})

	//点击确定按钮，关闭修改对话框和遮罩层，并将修改框的内容复制到输入框中。
	$('.qued').click(function(){
		$('.miss').hide(400);
		var textarea2=$('#textarea').val();
		$('.textarea').val(textarea2);
		$('.shadow').css('display','none');
	})
});

</script>

效果如下：