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');
});
Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table

Bloc resizable with jquery

Bloc resizable with jquery

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Créer une input search animée

Créer une input search animée

Image hover 04

Image hover 04

Loading style book loader

Loading style book loader

Social Media Icons

Social Media Icons

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Vers le haut

Vers le haut

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

toggle switch style03

toggle switch style03