master

分支 (1)

管理

管理

master

Example
/
model.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>自写模态框</title>
	<style type="text/css">
	html,body{
		background: #fff;
		width:100%;
		height:100%;
		margin:0px;
		padding:0px;
		background: url(./semantic/head.jpg)  center top no-repeat fixed;
	}
	.model_container{
		position: absolute;
		top:0px;
		left:0px;
		z-index: 1000;
		width:100%;
		height:100%;
		margin: 0 auto;
		background: rgba(0,0,0,0.5);
		display: table;
	}
	.model_wrap{
		display:table-cell;
		vertical-align: middle;
	}

	.model_content{
		position: relative;
		z-index: 10000;
		width:600px;
		height:450px;
		margin: 0 auto;
		background: #fff;
		border-radius: 5px;
		box-shadow: transparent 0px 1px 2px;
		overflow: hidden;
	}
	.m_header{
		position: absolute;
		top: 20px;
		left:20px;
		right:20px;
		height:50px;
		font-size: 24px;
		line-height: 50px;
		text-align: center;
		font-weight: 500;
		font-family: sans-serif;
		transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		cursor: pointer;
	}

	.m_header:hover{
		color:skyblue;
		font-weight:700;
	}
	.m_content{
		position: absolute;
		top: 90px;
		left:20px;
		right:20px;
		bottom: 90px;;
	}

	.m_content form input{
		width:300px;
		height:45px;
		border: 1px #444444 solid;
		border-radius:45px;
		float: left;
		margin-bottom: 18px;
		margin-left:150px;
		outline: none;
	}
	.m_footer{
		position: absolute;
		bottom: 20px;
		left:20px;
		right:20px;
		height:50px;
	}

	.m_footer .btn{
		width:100%;
		height:50px;
		border-radius: 5px;
		background:#444444;
		color:white;
		line-height: 50px;
		text-align: center;
		font-size: 18px;
		cursor: pointer;
		transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
	}

	.btn:hover{
		background: skyblue;
		font-weight: 700px;
		font-size: 20px;
	}
	.big_btn{
		position: absolute;
		width:100px;
		height:100px;
		z-index: 1;
		border-radius:100px;
		border: 1px skyblue solid;
		background: skyblue;
		color: white;
		line-height: 100px;
		text-align: center;
		font-size: 16px;
		cursor: pointer;
		transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		/*display: none;*/
	}
	.big_btn:hover{
		background: #42b983;
		font-weight: 700px;
	}
	</style>
</head>
<body>
<div class="big_btn">点击有惊喜</div>
<div class="model_container">
	<div class="model_wrap">
		<div class="model_content">
			<div class="m_header">登陆界面</div>
			<div class="m_content">
				<form name="" class="" method="">
					<input type="" name=""/>
					<input type="" name=""/>
					<input type="" name=""/>
					<input type="" name=""/>
				</form>
			</div>
			<div class="m_footer">
				<div class="btn">登陆</div>
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="./semantic/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.model_container').hide();
});

$(".big_btn").click(function(){
	$('.model_container').show();
});

$(".model_container").click(function(){
	$(this).hide();
});

$(".model_content").click(function(event){
	event.stopPropagation();
})
</script>
</html>