在Wordpress中显示动态弹出内容

Question

我有一个联系表单(cf7)，用户填写，我想有一个弹出显示在表单提交(我已经得到了这部分已经)，并显示内容的可变体取决于用户的下拉框中选择的项目。我目前正在使用wppopupmaker，我还没想好怎样才能用我现有的东西达到这个目的。

谢谢你的帮助!

Answer 1

创建一个引导模式弹出窗口，然后在function.php中添加此函数

<?php add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '34' == event.detail.contactFormId ) { // Change 123 to the ID of the form 
jQuery('#myModal2').modal('show'); //this is the bootstrap modal popup id
}
}, false );
</script>
<?php  } ?>

或

add_action('wpcf7_mail_sent', function ($cf7) {
// Run code after the email has been sent
$wpcf = WPCF7_ContactForm::get_current();
$wpccfid=$wpcf->id;
// if you wanna check the ID of the Form $wpcf->id
if ( '34' == $wpccfid ) { // Change 123 to the ID of the form 
echo '
<div class="modal fade in formids" id="myModal2" role="dialog" style="display:block;" tabindex="-1">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content no_pad text-center">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<div class="modal-header heading">
<h3 class="modal-title">Message Sent!</b></h3>
</div>
<div class="modal-body">
<div class="thanku_outer define_float text-center">
<h3>Thank you for getting in touch!</h3>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
';
}
});