欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-31 19:02:01
...

描述

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

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>

效果如下:

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