diogo谈框，仿prompt()方法布局

展示效果：

　　

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>diogo</title>
	<style>
		*{margin: 0;padding: 0;}
		.costPwd{ width: 450px;height: 200px;border-radius: 10px; border: 1px solid #3385FF;position: fixed;top:50%;left:50%;margin-left: -225px; margin-top: -100px; background: #fff; z-index: 2;}
		.costPwd span{position: absolute;top:0;right: 0; width: 30px;height: 30px; display: block; text-align: center; font-size: 20px; font-weight: bold;cursor:pointer; color: red;}
		.writePwd{margin-left: 80px; padding-right: 20px; }
		.costPwd input{ width: 200px; }
		.writePwd,.costPwd input{height: 30px; line-height: 30px; margin-top: 50px;}
		.costPwd a{ display: inline-block; width: 70px;height: 30px; background: #3385FF; border-radius: 10px;position: absolute; top: 120px; margin-left: 100px; text-align: center; line-height: 30px; color: #fff; text-decoration: none;}
		.tureBtn{left:10px;}
		.falseBtn{ left: 150px;}
		.bodyShowbg{ width: 100%;height:100%; background: #ccc;position: fixed;top: 0;left: 0;z-index: 1;opacity: 0.9;}
	</style>
</head>
<body>
	<div class="costPwd">
		<span>x</span>
		<lable class="writePwd">输入密码:</lable><input type="text">
		<div>
			<a href="" class="tureBtn">确定</a>
			<a href="" class="falseBtn">取消</a>
		</div>
	</div>
	<div class="bodyShowbg"></div>
</body>
</html>

 

posted @ 2015-06-17 10:44  Rain-Heart  阅读(211)  评论(0)  编辑  收藏  举报