How to create elementor popup with code in wordpress?

Create elementor popup with code in wordpress

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("[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' );

Copy only elementor section id 

Design a section

[elementor-template id="6165"]

                    Paste elementor section id in shortcode  


[elementor-popup id="6165"]


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

epopup-6165