06-04-2024

2024-04-06 11:55:24 +02:00
parent f7c5cf7d47
commit 3d22f9c5d8
550 changed files with 27249 additions and 2537 deletions
--- a/jquery.html
+++ b/jquery.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <title>Bootstrap</title>
+
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+
+
+	<style>
+body {
+		font-family:Arial, Helvetica, sans-serif;
+	}
+	 
+	p {
+		font-size: 16px;
+		line-height: 26px;
+		letter-spacing: 0.5px;
+		color: #484848;
+	}
+	 
+	/* Popup Open button */ 
+	.open-button{
+		text-decoration:none;
+	}
+	 
+	.open-button:hover{
+	}
+	 
+	.popup {
+		position:fixed;
+		top:0px;
+		left:0px;
+		background:rgba(0,0,0,0.75);
+		width:100%;
+		height:100%;
+		display:none;
+	}
+	 
+	/* Popup inner div */
+	.popup-content {
+		width: 700px;
+		margin: 0 auto;
+		box-sizing: border-box;
+		padding: 20px;
+		margin-top: 80px;
+		box-shadow: 0px 2px 6px rgba(0,0,0,1);
+		border-radius: 3px;
+		background: #fff;
+		position: relative;
+	}
+	
+	.content {
+		padding: 20px 0px;
+	}
+	 
+	/* Popup close button */
+	.close-button {
+		width: 35px;
+		height: 35px;
+		position: absolute;
+		top: -13px;
+		right: -13px;
+		border-radius: 20px;
+		background: rgba(0,0,0,0.8);
+		font-size: 25px;
+		text-align: center;
+		color: #fff;
+		text-decoration:none;
+	}
+	 
+	.close-button:hover {
+		background: rgba(0,0,0,1);
+	}
+
+	#maps { 
+		height: 350px;
+		width: 600px; 
+		margin: auto;
+	}
+	 
+	@media screen and (max-width: 720px) {
+	.popup-content {
+		width:90%;
+		}
+	#maps {
+	width: 90%; 
+	}
+	
+	}	
+		/*#maps { height:350px;width:425px; display:none; }*/
+
+</style>
+
+
+</head>
+
+<body>
+	<!--a class="open-button" href="javascript:void(0)"> Popup Preview</a-->
+<a href="#" class="open-button">&#x2693;</a>
+
+ 
+<div class="popup">
+	<div class="popup-content">
+	<h3>Title of Popup </h3>
+	<div id="maps"></div>
+	<div class="content">Popup 1 content will be here. Lorem ipsum dolor sit amet, 
+consectetur adipiscing elit. Aliquam consequat diam ut tortor 
+dignissim, vel accumsan libero venenatis. Nunc pretium volutpat 
+convallis. Integer at metus eget neque hendrerit vestibulum. 
+</div>
+	<a class="close-button" href="#">x</a>
+	</div>
+</div>  
+
+<script>
+$(function() {
+	
+		// create a center
+		var c = new google.maps.LatLng(46.61211515,5.8780727);
+		
+		//create map options object
+		var mapOptions = {
+			zoom: 11,
+			center: c,
+			mapTypeId: google.maps.MapTypeId.ROADMAP
+			};
+		
+		var map = new google.maps.Map(document.getElementById('maps'), mapOptions);
+		
+		var marker = new google.maps.Marker({
+			position: c,
+			label: {
+			  text: "\ue0c8",
+			  fontFamily: "Material Icons",
+			  color: "#ffffff",
+			  fontSize: "20px",
+			},
+			animation: google.maps.Animation.DROP,
+			title: "Material Icon Font Marker",
+			});
+		marker.setMap(map);
+
+		$(".open-button").click(function() {
+			$(".popup").show(100,'linear', function(){
+			google.maps.event.trigger(map, "resize"); // resize map
+			map.setCenter(c); // set the center		
+			});
+		});
+		$(".close-button").click(function() {
+			$(".popup").hide(100);
+		});
+		/*
+		$('body').on('mouseup', function() {
+			$('.popup').hide();
+		});
+		*/
+		$( document ).on( 'keydown', function ( e ) {
+			if ( e.keyCode === 27 ) { // ESC
+				$(".popup").hide(100);
+			}
+		});
+	});
+</script>
+
+</body>
+</html>              
+