Эффект затемнения вокруг формы

261

17 августа 2017, 20:17

Подскажите какие сss надо использовать для затемнение при запуске окна формы Вот так

Сама форма вот

.modal-window_top{ 
	font-family: OpenSans-Bold; 
	font-size:18px; 
	width: 502px; 
	height: 56px; 
	color:#000; 
	background-color: #f2f2f2; 
	text-align: center; 
} 
.close{ 
	margin-top: -40px; 
	margin-right: 17px; 
} 
.modal-window_bot{ 
width: 404px; 
height: 200px; 
border: 1px solid #dddddd; 
background-color: #f2f2f2; 
margin-left: 49px; 
margin-top:32px;  
} 
.form-control.forma_reg{ 
margin-top:15px;  
width: 364px; 
height: 41px; 
border: 1px solid #dddddd; 
background-color: #ffffff; 
} 
.btn.btn_reg{ 
width: 364px; 
height: 41px; 
background-color: #333333; 
color: #fff; 
margin-left: 15px; 
border-radius: 0; 
} 
.btn.btn_reg:hover{ 
	color: #fff; 
} 
.help-block.reg_txt{ 
	font-size:12px ; 
	font-family:OpenSans-Regular; 
	color:#000; 
	float: right; 
	clear: right; 
	margin-right: 50px; 
 
} 
.help-block.reg_txt a{ 
	font-size:12px ; 
	color:#999; 
	font-family:OpenSans-Regular; 
	text-decoration: underline; 
 
}

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
 
<!-- Optional theme --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
</head> 
<body> 
<div class="container"> 
 	<div class="row"> 
 		<div class="col-md-6 col-md-offset-3"> 
 			<div class="" style="position: relative;width: 502px;height:350px;background-color:#fff; "> 
 			<div class="modal-window_top"> 
 				<p style="padding-top:12px; ">ВХОД</p><img src="img/close.png" class="close"> 
 			</div> 
 				<div class="modal-window_bot"> 
 					<form role="form"> 
 						<div class="form-group"> 
 							<div class="col-sm-8"> 
 							<input  type="email" class="form-control forma_reg" placeholder="E-mail"> 
 						</div> 
 						</div> 
 							<div class="col-sm-8"> 
 							<div class="form-group"> 
 							<input type="password" class="form-control forma_reg" placeholder="Пароль"> 
 							</div> 
 							</div> 
 							 
					<button class="btn btn_reg">ВОЙТИ</button> 
 					</form></div> 
 					<p class="help-block reg_txt">У вас ещё нет учетной записи?</p> 
 							<p class="help-block reg_txt" style="margin-top: -12px;color:#999;"><a href="#">Создать аккаунт</a>/<a href="#">Забыли пароль?</a></p> 
 			 
 		</div><!--col-md-6--> 
 	</div><!--row--> 
 </div><!--conta--> 
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 </body> 
</html>

Answer 1

Тут есть несколько способов реализации: