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');
});
Alert Bootstrap4 style02

Alert Bootstrap4 style02

Background overlay

Background overlay

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Calculatrice style01

Calculatrice style01

Card Profile Style01

Card Profile Style01

Compteur avec b4

Compteur avec b4

Input range slider HTML style02

Input range slider HTML style02

Radio button style

Radio button style

Timeline style07

Timeline style07

Vers le haut

Vers le haut

input file récupérer le nom du fichier

input file récupérer le nom du fichier

toggle switch style01

toggle switch style01