Search
Close this search box.

Custom Elementor Popup

Amitpal Singh
Amitpal Singh
October 22, 2020
// Add Shortcode
function elementor_poup( $atts ) {

	// Attributes
	$atts = shortcode_atts(
		array(
			'id' => '',
		),
		$atts
	);
$etid = $atts['id'];

	
echo '<div class="elementor-popup-'.$etid.'"><div class="e-popup-content"><div class="eclose"><svg viewBox="0 0 10.6 11"><polygon points="6.3,5.4 10.4,1.4 9.2,0.3 5.3,4.2 1.3,0.3 0.2,1.4 4.3,5.4 0.2,9.5 1.3,10.7 5.3,6.8 9.2,10.7 10.4,9.5 "></polygon></svg></div>';
echo do_shortcode("[elementor-template id=$etid]");
echo '</div></div>';

	echo'<style>
	.epopup-'.$etid.'
	{
	cursor:pointer;
	}
	.elementor-popup-'.$etid.' .eclose
	{
	
	    z-index: 99999;
    position: absolute;
    top: 1em;
    right: 1em;
    cursor: pointer;
    line-height: 0;
    border-radius: 50%;
    padding: 10px;
    background: #DDE2EB;
    width: 40px;
    height: 40px;
    fill: #999999;
    -webkit-transition: fill .3s ease-in-out;
    transition: fill .3s ease-in-out;
	}
	.elementor-popup-'.$etid.'
	{
	width:100%;
	position:fixed;
	left:0px;
	top:0px;
	height:100%;
	background:rgba(0, 22, 58, 0.89);
	display:none;
	align-items:center;
	    z-index: 999990000;
	}
	.elementor-popup-'.$etid.' .e-popup-content section
	{
	width:100% !important;
	}
	.e-popup-content
	{
	width: 100%;
    margin: auto;
	position: relative;
	}
	.eclose svg {
    width: 14px;
    margin: 3px auto;
    display: table;
}
	
	</style>
	';
	echo '<script>jQuery(document).ready(function($){';
	?>

function validateEmail<?php echo $etid; ?>($email) {
  var emailReg = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return emailReg.test( $email );
}

	$('.epopup-<?php echo $etid; ?>').click(function(){
		$('.elementor-popup-<?php echo $etid; ?>').css("display","flex");
	});



$('.elementor-popup-<?php echo $etid; ?> .eclose').click(function(){
		$('.elementor-popup-<?php echo $etid; ?>').css("display","none");
	});

$('.epopup-<?php echo $etid; ?> .infusion-recaptcha').click(function(){
alert("before");
	var epopemailemail<?php echo $etid; ?> = $('.epopup-<?php echo $etid; ?> .infusion-field-input').val();
	
	if( !validateEmail<?php echo $etid; ?>(epopemailemail<?php echo $etid; ?>)) {
			$('.epopup-<?php echo $etid; ?> .infusion-field-input').css("border","1px solid red");
			return false;
		}
});

	<?php
	echo '});</script>';
	
}
add_shortcode( 'elementor-popup', 'elementor_poup' );

Share this post:

How to Attribute?

Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
for Example: Website, Social Media, Blogs, ebooks , newsletter, etc.
Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero.
Copied!

Got a Question? Check out our FAQ Section.

Your action, our appreciation

It encourage us to give you more valuable content on website.