Altering the Z-Index of an embedded Lightbox | Community
Skip to main content
A
Anonymous
October 11, 2017
Solved

Altering the Z-Index of an embedded Lightbox

  • October 11, 2017
  • 2 replies
  • 3691 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman

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.

2 replies

SanfordWhiteman
SanfordWhiteman
New Participant
October 11, 2017

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.

A
Anonymous
October 11, 2017

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
SanfordWhitemanAccepted solution
New Participant
October 11, 2017

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.

SanfordWhiteman
SanfordWhiteman
New Participant
October 11, 2017

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

Terms & ConditionsAccessibility statement

Loading footer...