Popups Not Working on Mobile

[scoopsdad]

Hey Guys,

Any idea why the popup windows are working great on desktop but not mobile? Popup windows won’t open at all on mobile devices.

A popup should be triggered each time any of the “Request Reservation” links or buttons are clicked on.

I’ve checked with the plugin developer first and they assured me this is not an issue with the plugin but is a theme issue.

Thank you!

[paul.r]

Hi,

You can test the case by switching your theme to wordpress default twenty seventeen theme.

Please note that the theme itself has a builtin modal feature and we strongly recommend you use it to minimize or avoid any conflicts.

It’s called Content Area Modal Element .

I have created an example

Thanks

[scoopsdad]

Thanks, Paul. I did explore the Content Area Modal element first but found it way too confusing and wasn’t able to get it to do what I needed.

Can you please walk me through how to apply it to the “Request Reservations” link in the topbar, text links throughout the copy, and the rollover graphic under the ‘Ready to Book’ section?

Thank you!

[christian]

Hey @scoopsdad,

This would require custom coding in X so I’d strongly recommend that you upgrade to Pro so you can add the Content Area Modal directly to a custom built header.

To trigger the modal using another link like the “Request Reservations” in your Topbar, you first need to assign a custom class to the link like <a class="open-modal" href="#">Request Reservations</a>.

You also need to assign a class to the Content Area Modal element.

@ThemecoKB

Lastly are the available controls within the Customize section. If you click on Customize You should see the available controls like this:

The available controls within the Customize section are:

Setup

The Setup controls consist of:

• ID - A custom ID you want to assign for use with custom CSS.
• Class - A custom class you want to assign for use with custom CSS.
• Hide During Breakpoints - Select different screen sizes you want to disable the output of the specific element on. Perfect for creating custom responsive headers.

Once all that are set, add this code in Theme Options > JS.

jQuery(function($) {
	$('.open-modal').on('click touchend', function() {
		$('.my-modal-class.x-anchor').trigger('click')
	})
})

That sample code only covers 1 content area modal. If you have other modals, you’ll need to duplicate that code and modify the selectors. In case you’re not familiar with JS, I’d recommend that you learn the language or enlist help from a third party developer to implement this for you.

Thanks.