Website Pop-Ups

[Anonymous]

What is the best way to implement a Modal Lightbox/pop-up that contains a Marketo form, and include it on the Home page of our site so that it opens when a visitor first hits the site? It has to work across all browsers, and scale to work on mobile devices (so that it can be easily dismissed if the user doesn't wish to fill out the form.) I have been testing out an embedded Lightbox code generated by the Marketo form designer, and I finally got it to display correctly on Internet Explorer, but the pop-up takes up the whole window on a mobile device such as a smartphone, and the "X" to close the pop-up is so close to the edge of the screen that you can't click on it to close out of the pop-up window. Does anyone have any suggestions on how to best implement a cross-browser pop-up that dynamically scales in size? Is JavaScript the best way to go (and if so does anyone have any code example), or has anyone made it work using the Marketo generated embed code for a Lightbox? Please help!

[Mark_Price]

Hi Matt,

Do you have a testing page to link?

If your site uses foundation, bootstrap or any other frontend framework, there is probably an existing function for a modal.

For the Marketo out of the box option- I'll have to defer to the community as I usually do the above. 

hope it helps!

[Anonymous]

This is a simple page where I’ve been testing the pop-up: https://www.riskinnovations.com/website-feature-test-page/ We use a managed WordPress site for our company Website.

I basically need it to do what it’s doing now (on Chrome and Internet Explorer) in Firefox as well (it moves down and to the right on Firefox.) I would also like it to scale, if possible, so we can use it on mobile devices. Right now it takes up the entire screen, and you can’t close it because the “X” is right at the edge of the screen. The pop-up was created by embedding the Lightbox code that was generated by the Marketo form designer, in a Code Block element in WordPress. I finally got it to display more or less how I wanted it to in Internet Explorer using the z-Index attribute (it was originally opening underneath our sticky header), but it works differently in Firefox. I need it to work the same in all browsers, as much as possible, whether it's on a desktop, laptop, or mobile device.

Thanks for taking the time to look at it!

[SanfordWhiteman]

Firefox bug is fixed in one of my posts here (or maybe 2) -- search the Community as I think I linked to it w/in the past 30 days.

[Mark_Price]

Hi Matt,

Since it looks like you've invested a lot of time styling the Marketo Form, I would steer the course and try to get that to work. Looking back, I think this very bug is why I just started using a different solution for the modal.

Here are the fixes Sanford mentioned:

Re: Different form behavior in Chrome and Firefox

https://nation.marketo.com/message/114928#comment-114928

hope it helps!