Modal JetSmartFilter Resposive with Elementor

Instructions for creating modals for product filters using JetSmartFilter with Elementor

Create Container with setting below

• Padding: 15px 15px 100px 15px

• Position: Fixed

• Horizontal: right

• Vertical: top - Offset: 185

• Z-index: 90

• CSS Classes: cat-filter-col mobile

Transform: Offset Y 70vh

Setting Resposive "Hide On Desktop" and "Hide On Laptop"

Elements Filter should be type "Page load" for pagination work perfect

Create Button Close

setting like image

CSS Classes: evps-close-modal-filter

Add script to Footer

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var filterMobile = $('.cat-filter-col.mobile');
var filterBtn = $('.apply-filters__button');
var filterClose = $('.evps-close-modal-filter');	
	
$('.evps-filter-btn').click(function(){
	filterMobile.css('--e-con-transform-translateY','0');
	/* Disable scrolling page */
	$('body').css('overflow', 'hidden');
	/* Add shadow */
	if (filterMobile.hasClass('filter-shadow')){
		filterMobile.removeClass('filter-shadow');
	}
	else {
		filterMobile.addClass('filter-shadow');
	}
});

filterBtn.click(function(){
	filterMobile.css('--e-con-transform-translateY','70vh');
	/* Remove shadow */
	filterMobile.removeClass('filter-shadow');
	/* Enable scrolling page */
	$('body').css('overflow', 'auto');
});
filterClose.click(function(){
	filterMobile.css('--e-con-transform-translateY','70vh');
	/* Remove shadow */
	filterMobile.removeClass('filter-shadow');
	/* Enable scrolling page */
	$('body').css('overflow', 'auto');
});	
});
});
</script>

Add Style

<style>
@media(max-width:767px){
.cat-filter-col.mobile{
    height: 70vh;
    overflow-y: scroll;
    flex-wrap: nowrap;
}
.filter-shadow{
    box-shadow: 0 -40vh 0px 0px #0000007d;
}
}
</style>