4 Replies Latest reply on Nov 16, 2017 9:53 AM by Mark Price

    Website Pop-Ups

    Matt Fulkes

      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!

        • Re: Website Pop-Ups
          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!

            • Re: Website Pop-Ups
              Matt Fulkes

              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!