בלוג

פונקציה לבניית חיפוש

add_action('wp_footer',function(){
	?>
	<script>
	var $ = jQuery.noConflict();
	$(document).ready(function($){
		var width  = window.innerWidth;
		var height = window.innerHeight;
		var el =  $('<div class="search-overlay" style="height:'+ height +'px; width:' + width +'px;"><i class="fas fa-times"></i><div class="search-form"><h2>חיפוש תכנים באתר</h2><form method="get" class="searchform" id="searchform" action=""><input type="text" class="field" name="s" id="s" placeholder="חיפוש"></form></div></div>');
		$(el).appendTo('body');
		console.log('search-overlay');
		$('#search-btn').click(function(){	  
			$('.search-overlay').addClass('search-active');
			$('.search-overlay').fadeIn(800);
			
		});
	$('.fas.fa-times').click(function(){
		$('.search-overlay').fadeOut(100);
	})	
	});
	</script>
	<style>
		.search-overlay{
			position:fixed;
			top:0;
			left:0;
			background:rgba(0,0,0,0.8);
			display:none;
		}
		.search-overlay h2{
			color:#fff;
		}
		.search-form{
			margin:0 auto; position:relative; width:400px; top:50%;
		}
		.search-form input{
	        background:rgba(255,255,255,0.8) !important;
		}
		.fas.fa-times{
			position: absolute;
    		right: 2%;
   		    top: 20%;	
			font-family: fontAwesome;
			color:#fff;
			font-size:40px;
		}
		    
}
	</style>
	<?php
});