lealhugui · September 23, 2016 18:11
diff --git a/menu.html b/menu.html
 <!DOCTYPE html>
 <html>
 <head>	
 	
 	<title>PJAX exemple</title>	
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>		
 	<script type="text/javascript">
 		function loadData(title, uri){
 			history.pushState(null, title, uri);
 			$("#pjax-container").html("<div class='text-center'><h2>"+title+"</h2></div>");
 			overrideA();

 		}

 		function overrideA(){			
 			$("a").not(".exclude-pjax").off().on("click", function(e){
 				e.preventDefault();
 				loadData($(this).text(), $(this).attr("href"));
 			});
 			
 		}
 		function modalToggle(content){
 			$("#modal-body").html(content);
 			$("#modal-container").toggleClass("active");
 		}
 		function myInfo(e){
 			e.preventDefault();
 			e.stopPropagation();
 			modalToggle("<a href='http://github.com/lealhugui' target='_blank'>http://github.com/lealhugui</a>");
 		}
 	</script>
 	<style type="text/css">
 		html, body {
 			height: 100%;
 			width: 100%;
 		}
 		.text-center {
 			text-align: center;
 		}
 		#modal-container {
 			height: 50%;
 			width: 50%;
 			left: -100%;
 			top: -100%;
 			overflow: hidden;
 			border: 1px solid rgb(204, 204, 204);
 			position: absolute;
 			transition: all .4s ease 0s;
 		}
 		#modal-title-row {
 			width: 100%;
 			height: 30px;
 			background-color: rgb(194, 214, 214);
 			overflow: hidden;
 		}
 		#modal-title {
 			width: 80%;
 			height: 100%;
 			color: rgb(255, 255, 255);
 			float: left;
 		}
 		#modal-close {
 			width: 20%;
 			height: 100%;
 			float: left;
 			background-color: rgb(13, 13, 13);
 		}
 		#modal-container.active{
 			top: 25%;
 			left: 25%;
 		}
 		#menu{
 			text-align: center;
 			width: 100%;
 			height: 10%;
 		}
 		#pjax-container{
 			width: 100%;
 			height: 90%;
 		}
 	</style>
 </head>
 <body>
 	<div id="menu">
 		<div style="float:left;"><a href="#/route1"><h2>Route 1</h2></a></div>
 		<div style="float:left; padding-left:5px;"><a href="#/route2"><h2>Route 2</h2></a></div>
 		<div style="float:left; padding-left:5px;" ><a href="" onclick="myInfo(event)" class="exclude-pjax"><h2>My Info</h2></a></div>
 	</div>
 	<div id="pjax-container">
 		<div class='text-center'><h2>Index</h2></div>
 	</div>
 	<div id="modal-container">
 		<div id="modal-title-row">
 			<div id="modal-title">Teste de Modal</div>
 			<div id="modal-close"></div>
 		</div>
 		<div id="modal-body">
 		</div>
 		
 	</div>
 	<script type="text/javascript">
 		window.onpopstate=function(event){
 			loadData(document.title, document.location);
 		};
 		overrideA();
 		$("#modal-close").off().on("click", function(e){
 			e.preventDefault();
 			modalToggle();
 		})
 	</script>
 </body>
 </html>