popover close button

Hi @casarod5,

I hope you are well today and thank you for your question.

You will have to make some changes in the plugin code to create a second close button of the popover on the content box.

Create html code for the secondary close button having unique ID.

Example:

<a href='' id='custom-closebox' title='<?php _e('Close this box','popover'); ?>'><?php _e('Close this box','popover'); ?></a>

Add above code in the following plugin files in the outer Div :

wordpress-popup/popoverincludes/css/default/popover.php
wordpress-popup/popoverincludes/css/fixed/popover.php
wordpress-popup/popoverincludes/css/fullbackground/popover.php
wordpress-popup/popoverincludes/css/fullbackgroundfixed/popover.php

Then in the following plugin js file add the secondary button selector on line number 58 , in this case it is #custom-closebox

wordpress-popup/popoverincludes/js/popoverlegacy.js

Example:

jQuery('#closebox, #closebox2').click(po_removeMessageBox);

Note: The changes made in the plugin will be lost when you update the plugin and you have to redo the changes.

Please advise if you have more questions.

Best Regards,

Hi,

This solution will work properly if you want the close button on all popovers however, i was hoping more of a php do echo shortcode directly on the wp template or like an onclick=closebox. At this point I have the button doing a href=”javascript:history.go(-1). if you can look at the example page that I have

https://mahomesale.com/listing-details/listing-71571618-singlefamily-19-ridgewood-rd-worcester-ma/

you will get a popever and you will see the close button there. I have hidden the original x close from the css file, so right now there is no option to just close the box.

Hi @casarod5,

Thank you for your reply.

If you want to hide default close button from particular Popover then just add following CSS code in the Popover content.

<style type="text/css">
#closebox{
display: none;
}
</style>

And if you want to add another custom close button on a particular Popover then just add following JavaScript code in the Popover content.

<script type="text/javascript">
	jQuery( document ).ready( function() {
		jQuery( "#closebox" ).after("<a href='' id='custom-closebox' title='Close this box'>Close this box</a>");
		jQuery( '#custom-closebox').click( function() {
			jQuery( "#message, .visiblebox" ).hide();
			return false;
		});
	});
</script>

Kind Regards,

Hey there.

We haven’t heard from you in awhile, so I just wanted to check in to make sure all was good.

This thread was marked resolved, but please, if you still need help then just respond and open it back up. We can then take it from there. ??

Hope you have a fantastic day!

the close didn’t work properly, so I just used href=”javascript:history.go(-1)”. Since its a three step form on the last page i made it href=”javascript:history.go(-3)”.

Hi @casarod5,

the close didn’t work properly,

I have tested the code on my test site and it worked fine.

Could you please tell me which code you have used?

Also please share me the page link where you have used the provided code so that i can troubleshoot it.

so I just used href=”javascript:history.go(-1)”. Since its a three step form on the last page i made it href=”javascript:history.go(-3)”.

This code doesn’t close the pop up instead it navigates to previous page and if we visit the following page directly then clicking on “Close” button won’t navigate to previous page.

https://mahomesale.com/listing-details/listing-71571618-singlefamily-19-ridgewood-rd-worcester-ma/

Regards,

try this link because the one above doesn’t work.

https://mahomesale.com/listing-details/listing-71190057-singlefamily-8-naumaan-ln-worcester-ma/

you can try it here. I have hidden the closebox.

I tried the code below

<script type="text/javascript">
	jQuery( document ).ready( function() {
		jQuery( "#closebox" ).after("<a href='' id='custom-closebox' title='Close this box'>Close this box</a>");
		jQuery( '#custom-closebox').click( function() {
			jQuery( "#message, .visiblebox" ).hide();
			return false;
		});
	});
</script>

how would I edit the close button that I have on the form?

also the form above i have it on a template page and I’m using iframe to display the form on the popup. this could also be the reason why it might not be working properly for me. By navigating to the previous page it basically works fine for my purpose, so you probably don’t have to waste your time trying to troubleshoot it.

Thanks
Ed

Hi Ed,

You are using different ID for the close button and in the provided JavaScript code different id is used as a close button selector so instead of above code you should use following code which uses proper id selector.

<script type="text/javascript">
	jQuery( document ).ready( function() {
		jQuery( '#TB_closeWindowButton').click( function() {
			jQuery( "#message, #darkbackground, .visiblebox" ).hide();
			return false;
		});
	});
</script>

By navigating to the previous page it basically works fine for my purpose, so you probably don’t have to waste your time trying to troubleshoot it.

If it’s working fine for you then it’s ok.

Cheers,

so let’s say this is the popup i’m trying to create will this work. I’ve tried it and i was having issue.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <h2>Welcome to Mahomesale.com! </h2>

<script type="text/javascript">
	jQuery( document ).ready( function() {
		jQuery( '#TB_closeWindowButton').click( function() {
			jQuery( "#message, #darkbackground, .visiblebox" ).hide();
			return false;
		});
	});
</script>

    <div class="position_wrapper">
      <div class="center_me">
	          <a id="TB_closeWindowButton" class="button1 jqm_close" ><span>Close</span></a>
      </div>
   </div>

Hi Ed,

<script src=”//code.jquery.com/jquery-1.10.2.js”></script>

Instead of using jQuery like this you should use default WordPress jQuery by adding following code in functions.php file of your theme.

function theme_name_scripts() {
	  wp_enqueue_script( 'jquery' );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

<script type=”text/javascript”>
jQuery( document ).ready( function() {
jQuery( ‘#TB_closeWindowButton’).click( function() {
jQuery( “#message, #darkbackground, .visiblebox” ).hide();
return false;
});
});
</script>

As mentioned previously you should add above JavaScript code in the Popover content.

<div class=”position_wrapper”>
<div class=”center_me”>
<span>Close</span>
</div>
</div>

You don’t need to add above markup again as it is already in the page.

Just do the things as mentioned above on your website and if it doesn’t work then let me know without reverting it so that i can troubleshoot it on your site.

Best Regards,