Altering the Z-Index of an embedded Lightbox

[Anonymous]

Is there a way to edit the Z-index of a form in an embedded Lightbox on a non-Marketo site? We want to use an existing opt-in form in a pop-up on the Home page of our WordPress Website, but the site makes use of Sticky Headers, and the top of the Lightbox appears underneath the Sticky Header. I know I can set the Z-index of the Lightbox to a higher number than the Z-index of the Sticky Header, but how do I go about this? Is there a way to edit/add the code in Marketo, or is it something I'll have to add when I insert the Lightbox embed code into a Code Block in WordPress? And if that's the case, what code should I use with the embed code, that won't affect its functionality? Has anyone dealt with this issue? I can get the pop-up to appear on the page at load, but I need it to be on top of everything else, including the Sticky Header. Please help! Thanks.

[SanfordWhiteman]

Pls move this to Products and I'll answer it there. (Move link is at the right.)

[SanfordWhiteman]

The style for the Forms 2.0 modal is set in this CSS rule:

.mktoModal .mktoModalContent {
  z-index: 10001;
}

You can add a custom CSS rule to override that with a higher z-index. But without seeing your page it's not possible to know for sure if that'll solve it.

[Anonymous]

This is the Marketo generated script I will be using. I just need a way to change the Z-index so the Lightbox appears on top of the Sticky Header at the top of the page. Home - Risk Innovations, LLC

<script src="//app-sj15.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1104"></form>

<script>MktoForms2.loadForm("//app-sj15.marketo.com", "274-BWB-611", 1104, function (form){MktoForms2.lightbox(form).show();});</script>

[SanfordWhiteman · Accepted solution]

That's the embed script, which includes Custom CSS you've set up in Form Editor. You'd make the CSS change above in Form Editor and it's automatically embedded.

[Anonymous]

Yes, the embed script is what I'll be adding to a Code Block in WordPress.

So I have to add the Z-index code as Custom CSS in the form editor, then export the embed code again. Okay, I'll try that. Thanks.

Update: Okay, I think I've got it to work how I need it to. Thanks for the help!

[Anonymous]

I have some updated questions regarding this post:

1) Is there an easy way to make the Lightbox center display in the center of the page in Firefox. It displays in the center of the page in Chrome and IE, but it displays lower and offset to the right in Firefox. It's not a major problem, but it would be nice if it displayed more or less the same way in all of the browsers.

2) IE is having issues with the Z-index, and still displaying the Lightbox underneath the Sticky Header. I have tried increasing the Z-index value even further, but IE is still displaying the Sticky Header on top of the Lightbox, and unfortunately the "X" to close the Lightbox is at the top right of the Lightbox, and hidden under the Sticky Header. Is there a way to force the Lightbox to display at the very top of the stack in Internet Explorer or, barring that, exclude the Lightbox from opening in IE, but still allowing it to open in other browsers? I'm sure there's some IE hack to accomplish one or both of these things, but I don't know it. Any help would be appreciated. Thanks!

[SanfordWhiteman]

1) Is there an easy way to make the Lightbox center display in the center of the page in Firefox. It displays in the center of the page in Chrome and IE, but it displays lower and offset to the right in Firefox. It's not a major problem, but it would be nice if it displayed more or less the same way in all of the browsers.

See here:

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

For IE, I'm sure a dev could fix this for you, but nothing immediately comes to mind.