Implementer Documentation
Widget Z-Index
When using any of our widgets to open Suite, we place a partially transparent veil over the top of the host webpage to dim it out and then open a modal window to display Suite on top. This separates Suite from the rest of the page and allows the user to concentrate on the information in the modal window. This is accomplished by layering Suite using a Z-Index higher than any other element on the host page. It is very important that no other page elements have a higher Z-Index, as Suite will then not correctly display and you will get an undesired result.
In addition to the above considerations it is important to note that the PaymentDriver widget includes "help" pop-ups with additional regulatory content. These pop-ups are important to display from a legal standpoint. To this end we have set a z-index of 12000 on the pop-up elements that is not directly controllable using the selectors discussed in this article to best ensure that this regulatory content can be displayed to users regardless of other page design elements. Please ensure as part of your implementation that these pop-ups are functional and visible.
Demonstration
Click these different links to see the difference between a page with correct z-index settings and a page with incorrect z-index settings.
How do we make this happen?
If you have elements on your site with a z-index you may need to adjust the z-index of our popup's elements so that Dealertrack Technologies' Digital Retailing Suite modal window pops up over the rest of the page from which it is launched.
Two CSS classes should be included in your CSS or specified in a style tag on the page to ensure the modal window is displayed properly.