Scroll to top

How to create elementor popup with code in wordpress?

elementor popup Code

 
 
Use in main-function file

// 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(““);
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_.+-])[email protected](([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’ );

 
 
Copy only elementor section id 
Design a section
 

                    Paste elementor section id in shortcode  


[elementor-popup id=”6165″]

          Add class which give you below this line(in elementor)

epopup-6165

Get more information

Read More Posts

Leave a Reply

Your email address will not be published. Required fields are marked *