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');
});
toggle switch style03

toggle switch style03

input radio checkbox b4 style

input radio checkbox b4 style

input file récupérer le nom du fichier

input file récupérer le nom du fichier

Timeline style03

Timeline style03

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Responsive image grid

Responsive image grid

Profile page with b4

Profile page with b4

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Manual Slideshow

Manual Slideshow

Loading style book loader

Loading style book loader

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Alert Bootstrap4 style01

Alert Bootstrap4 style01