Bootstrap modal avec un formulaire newsletter

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap modal avec un formulaire de la newsletter | Par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Bootstrap modal avec un formulaire de la newsletter">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body class="container">
	<div class="row">
	    <div class="col-lg-8 loading">
		<div id="myModal" class="modal fade">
			<div class="modal-dialog modal-newsletter">
				<div class="modal-content">
					<form action="/examples/actions/confirmation.php" method="post">
						<div class="modal-header">
							<div class="icon-box">
								<i class="fa fa-envelope"></i>
							</div>
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span>&times;</span></button>
						</div>
						<div class="modal-body text-center">
							<h4>Inscrivez-vous</h4>	
							<p>Abonnez-vous à notre newsletter pour recevoir les dernières mises à jour et promotions.</p>
							<br>
							<div class="form-group">
								<input type="email" class="form-control" placeholder="Entrer votre email" required>
								<input type="submit" class="btn btn-primary" value="Inscrivez-vous">
							</div>
						</div>
					</form>			
				</div>
			</div>
		</div>
		<p class="hint-text text-center">
			<strong>Infos:</strong> Veuillez actualiser la page ou exécuter le code pour recharger le modal, ou 
			<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">cliquer ici</button>.
		</p>		
		</div>		
	</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
body {
    font-family: 'Open Sans', sans-serif;
}	
.modal-newsletter {	
    color: #999;
    width: 480px;
    font-size: 15px;
}
.modal-newsletter .modal-content {
    padding: 40px 50px;
    border-radius: 1px;		
    border: none;
}
.modal-newsletter .modal-header {
    border-bottom: none;   
    position: relative;
    text-align: center;
    border-radius: 5px 5px 0 0;
}
.modal-newsletter h4 {
    color: #000;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 30px;
    margin: 0 0 25px;		
    text-transform: uppercase;
}
.modal-newsletter .close {
    position: absolute;
    top: -15px;
    right: -25px;
    color: #c0c3c8;
    text-shadow: none;
    opacity: 0.5;
    width: 22px;
    height: 22px;
    border-radius: 20px;
    font-size: 16px;
    border: 2px solid;
}
.modal-newsletter .close:hover {
    opacity: 0.8;
}
.modal-newsletter .icon-box {
    color: #49c5c1;		
    display: inline-block;
    z-index: 9;
    text-align: center;
    position: relative;
}
.modal-newsletter .icon-box i {
    font-size: 110px;
}
.modal-newsletter .form-control, .modal-newsletter .btn {
    min-height: 46px;
    text-align: center;
    border-radius: 1px; 
}
.modal-newsletter .form-control {
    box-shadow: none;
    border-color: #dbdbdb;
}
.modal-newsletter .form-control:focus {
    border-color: #49c5c1;
    box-shadow: 0 0 8px rgba(73, 197, 193, 0.5);
}
.modal-newsletter .btn {
    color: #fff;
    background: #49c5c1;
    text-decoration: none;
    transition: all 0.4s;
    line-height: normal;
    padding: 6px 20px;
    min-width: 180px;
    border: none;
    margin-top: 20px;
    font-family: 'Airal', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
.modal-newsletter .btn:hover, .modal-newsletter .btn:focus {
    background: #39b3af;
    outline: none;
}
.modal-newsletter .form-group {
    margin-top: 30px;
}
.hint-text {
    margin: 100px auto;
    text-align: center;
}
$(document).ready(function(){
    $("#myModal").modal('show');
});
Timeline style04

Timeline style04

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Scroll down button 01

Scroll down button 01

Radio button style

Radio button style

Pie Charts

Pie Charts

Loading Style snake

Loading Style snake

Google Style Login

Google Style Login

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Create icon animate with svg

Create icon animate with svg

Blog post card 01

Blog post card 01

Bloc resizable with jquery

Bloc resizable with jquery