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/_test/maps/jquery-popup.html
+++ b/_test/maps/jquery-popup.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <title>Create a Modal Popup using jQuery - Clue Mediator</title>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <style>
+	body {
+	  font-family: Helvetica, Arial, sans-serif;
+	}
+
+	p {
+	  font-size: 16px;
+	  line-height: 26px;
+	  letter-spacing: 0.5px;
+	  color: #4f4343;
+	}
+
+	/* Popup open button */
+	.openBtn {
+	/*
+	  color: #FFF;
+	  background: #269faf;
+	  padding: 10px;
+	  border: 1px solid #269faf;
+	  border-radius: 3px;
+	 */
+	  text-decoration: none;
+	}
+
+	.openBtn:hover {
+		/*
+	  background: #35c7db;
+	  */
+	}
+
+	.popup {
+	  position: fixed;
+	  top: 0px;
+	  left: 0px;
+	  background: rgba(0, 0, 0, 0.58);
+	  width: 100%;
+	  height: 100%;
+	  display: none;
+	}
+
+	/* Popup inner div */
+	.popup-content {
+	  width: 600px;
+	  margin: 0 auto;
+	  padding: 40px;
+	  margin-top: 100px;
+	  border-radius: 3px;
+	  background: #fff;
+	  position: relative;
+	}
+
+	/* Popup close button */
+	.closeBtn {
+	  position: absolute;
+	  top: 5px;
+	  right: 12px;
+	  font-size: 17px;
+	  color: #7c7575;
+	  text-decoration: none;
+	}
+	
+	#maps { height:350px;width:425px; display:none; margin: auto;}
+	
+	.toggle {
+		text-decoration: none;
+	}
+	
+  </style>
+</head>
+
+<body>
+
+<h3>jquery-popup.html<h3>
+	
+<!--a href="#" class="toggle" onclick"javascript:void(0)">gm</a>
+<button type="button" class="toggle">&#x2693;</button>
+<span class="toggle">&#x2693;</span-->
+
+<a href="#" class="toggle">&#x2693;</a>
+
+<div id="maps"></div>
+
+<script>
+
+	$(function () {
+
+		// create a center
+		var c = new google.maps.LatLng(-33.8790, 151.2064);
+
+		//create map options object
+		var mapOptions = {
+			zoom: 14,
+			center: c,
+			mapTypeId: google.maps.MapTypeId.ROADMAP
+		};
+
+		var map = new google.maps.Map(document.getElementById('maps'), mapOptions);
+
+		$(".toggle").click(function () {
+			// check the visibility of the next element in the DOM
+			$(this).next().slideToggle(300, function(){
+				google.maps.event.trigger(map, "resize"); // resize map
+				map.setCenter(c); // set the center
+			}); // slide it down
+
+		});
+
+	});
+
+
+</script>
+
+</body>
+
+</html>