Problem re-triggering modal via toggle hash from button in page content

[liquidedge]

I have a content area modal in my header with the Toggle Hash set to quote-form:

And I then have numerous buttons to trigger the modal in page content:

This all works fine. I can open a modal using one of the buttons with the URL set to #quote-form. Problem is, if I close the modal, I can’t re-open it from the same button. The hash remains on the URL which I assume is part of the issue:

Perhaps I’m missing a setting somewhere? Otherwise, seems to be something that needs to be addressed.

[friech]

Hi @liquidedge,

Thank you for writing in and sorry that you’re having that issue, I’ve submitted this to our issue tracker so the developers will be made aware of it.

A workaround for this is to make your Content Area Modal/Quote form a Global Block, so you only create it once and then use the Global Block element or the global block shortcode to place that on any page.

Thank you for understanding,

[rad]

Hi @liquidedge,

The toggle hash feature is for address bar hash when a user visited a page.

You can confirm that by removing your button, then visit your site’s URL with that hash on another window/browser, and the modal will appear.

The modal appears when the button is clicked is because the button itself changes the address bar, and any change in address bar is considered as a page reload by the browser. You can confirm that by visiting your page without hash, then while observing your browser address bar, click the button. You’ll see the address bar is changed, and that changed triggers the modal.

The modal will not appear if you click the button again since the address bar’s hash remains the same (no change at all) hence doesn’t seems to be reloaded. The hash toggle only works upon page load and URL change.

Though, it might be a good feature in the future. But for now, it’s not good to bind a button to any other elements creating dependencies between them which usually causes more issues. But, this workaround should help you

Please add an ID to your button, you may decide what ID

Same goes for your modal element

Then we’ll link both ID by adding this code to your builder’s custom javascript.

jQuery ( document ).on ('click', '#this_will_trigger_the_modal', ( e ) => { 
e.preventDefault(); 
jQuery('#this_is_the_modal').trigger('click touchstart');
} );

Just make sure the ID matches in the code

Thanks!

[liquidedge]

The solution that worked for me is this:

$("#this_will_trigger_the_modal").click(function(e) {
	e.preventDefault();
	$("#this_is_the_modal-anchor-toggle").trigger('click');
});

Note that the a element gets -anchor-toggle added to it.

Also, touchstart seemed to break it completely too, not sure why?

[jade]

Hi @liquidedge,

jQuery does not support triggering multiple events that is why having click and touchstart on trigger does not work.

You might want to check the suggestions here if you want a workaround for that:

jQuery .trigger() multiple events

Hope this helps.