<div id="footer" class="container">
	<div class="row">
		<?php appthemes_before_sidebar_widgets( 'va-footer' ); ?>

		<?php dynamic_sidebar( 'va-footer' ); ?>

		<?php appthemes_after_sidebar_widgets( 'va-footer' ); ?>
	</div>
</div>
<div id="post-footer" class="container">
	<div class="row">
		<?php wp_nav_menu( array(
			'container' => false,
			'theme_location' => 'footer',
			'fallback_cb' => false
		) ); ?>

		<div id="theme-info"><a href="https://www.appthemes.com/themes/vantage/" target="_blank" rel="nofollow">Vantage Theme</a> &ndash; Powered by <a href="https://www.wordpress.org" target="_blank" rel="nofollow">WordPress</a>.</div>
	</div>
</div>

<!-- Ajouter par h-raf -->
<style>
	/* The Modal (background) */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		padding-top: 300px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /* Fallback color */
		background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}
	/* Modal Content */
	.modal-content {
		background-color: #fefefe;
		margin: auto;
		padding: 20px;
		border: 1px solid #bdbcbd;
		width: 60%;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}
	/* The Close Button */
	.close {
		color: #aaaaaa;
		// float: right;
		font-size: 16px;
		font-weight: bold;
		margin-top: 10px;
		width: 80px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 6px;
		border-radius: 5px;
	}
	.close:hover,
	.close:focus {
		color: #000;
		text-decoration: none;
		cursor: pointer;
	}
	input#numero-address,input#rue-address,input#ville-address {
		width: 95%;
	}
</style>

<div id="myModal" class="modal" style="display: none;">
  <!-- Modal content -->
  <div class="modal-content">
	<h3>Adresse</h3>
	<label>
	 Num&#233;ro	
	 <input id="numero-address" type="text" value="" class="required">
	</label>
	<label>
	 Rue	
	 <input id="rue-address" type="text" value="" class="required">
	</label>
	<label>
	 Ville	
	 <input id="ville-address" type="text" value="" class="required">
	</label>
	<button id="okBtn" class="close">Ok</button>
  </div>
</div>

<script>
	// Récuperer le modal
	var modal = document.getElementById('myModal');

	// Afficher le modal
	var btn = document.getElementById("listing-address");

	// Récuperer l'element btnOk qui ferme le  modal
	var btnOk = document.getElementById("okBtn");

	// Qant l'utisateur click sur la zone de texte le modal s'affichera 
	btn.onclick = function() {
		modal.style.display = "block";
	}
	
	btn.onfocus = function() {
		modal.style.display = "block";
	}
	
	// Qant l'utisateur click sur le bouton ok les valaures s'affectera a la zone de text et le modal se cachera  
	btnOk.onclick = function() {
		var numero = document.getElementById("numero-address").value;
		var rue = document.getElementById("rue-address").value;
		var ville = document.getElementById("ville-address").value;
		var adrComplet = [numero, rue, ville];
		if (numero == "" || rue == "" || ville == "") {   
		} else {
		   adrComplet = [numero, rue, ville];
		   document.getElementById('listing-address').value = adrComplet;
		   modal.style.display = "none";
		}
	}
</script>
<!-- Fin -->