简体繁体 English

Javascript / JQuery-我页面上的动态生成的div（换行），我无法更改或应用样式

[英]Javascript / JQuery - Dynamically generated divs (wrap) on my page I can't change or apply style

原文 2015-12-15 03:38:48 8 2 javascript/ jquery

I have this page where I tried to create a on page pop-up for an image using JS/JQuery, following this example ( http://www.jqueryscript.net/lightbox/Simple-jQuery-Plugin-For-Opening-A-Popup-Window-On-Page-load.html ). 我有这个页面，在这个示例中，我尝试使用JS / JQuery为图像创建页面弹出式窗口（ http://www.jqueryscript.net/lightbox/Simple-jQuery-Plugin-For-Opening-A -Popup-Window-On-Page-load.html ）。

Although I succeeded on it, when I try to implement it on my customer page, some divs are on front of my pop-up, no matter how high I configure the "z-index" for it. 尽管我成功完成了此操作，但是当我尝试在客户页面上实现该功能时，无论我将“ z-index”配置为多高，弹出窗口前面都会有一些div。 Also, these divs seem to be dinamically generated, as they have the "wrap" id div around that I can't find on my .php file for this page. 另外，这些div似乎是动态生成的，因为它们具有“ wrap” id div，而我在此页的.php文件中找不到。

So, no matter what I do, these images are on front of my pop-up (except if I remove them using the "Inspect element" tool or change the z-index on them with Inspect Element, changing the inline style for this automatically generated "wrap" div). 因此，无论我做什么，这些图像都位于弹出窗口的前面（除非我使用“检查元素”工具将其删除，或者使用检查元素更改它们的z索引，然后自动更改其内联样式）生成的“包装” div）。

This is the page without any changes on "Inspect Element", the white image boxes with the red arrows are the problem here (they belong to the page under the pop-up and I need them to be under the pop-up): http://imgur.com/waB1igo 这是在“检查元素”上没有任何更改的页面，带有红色箭头的白色图像框是这里的问题（它们属于弹出窗口下的页面，我需要将它们放在弹出窗口下）： http ：//imgur.com/waB1igo

This is what happens if I change the z-index of the automatically generated div "wrap" that I can find searching the code with "Inspect element" for one of the boxes (the first one): imgur.com/lDk1eRA 如果更改了自动生成的div“ wrap”的z-index，就会发生这种情况，我可以使用“ Inspect element”搜索代码中的一个框（第一个）：imgur.com/lDk1eRA

So, any of you guys have a tip for me on how to solve this problem? 那么，你们中的任何一个都向我提示如何解决此问题？

I've already tried to create new css rules for this div or the img's tags, using the "!important" and these kind of things, without result. 我已经尝试使用“！important”和此类方法为该div或img的标签创建新的CSS规则，但没有结果。

Thanks very much in advance and sorry for english errors, Matheus Barreto. 马修·巴雷托（Matheus Barreto），非常感谢，并感谢您对英语的错误。

2 个解决方案

You might want to try setting the position property of the overlay to absolute . 您可能需要尝试将叠加层的position属性设置为absolute 。 Images that have their positions set to absolute will get on top of everything that is not set to position absolute or fixed which can be very annoying. 将其位置设置为绝对位置的图像将位于所有未设置为绝对位置或固定位置的图像之上，这可能会非常令人讨厌。 You might need to work around a bit with centering it or other issues that come from setting its position to absolute but this should work. 您可能需要解决一些问题，以使其居中，或将其位置设置为绝对位置而产生其他问题，但这应该可以解决。

Try to make sure your overlay DIVs are outside wrappers, inside the </body> tag, before closing scripts... If the DIV is inside another that has a lower z-index, it won't "pop out" of it. 在关闭脚本之前，请尝试确保覆盖的DIV位于</ body>标记内的包装纸之外。如果DIV位于Z索引较低的另一个DIV内，则它不会“弹出”。

Also, you may try really high z-index , such as 8000 or higher. 另外，您可以尝试使用非常高的z-index ，例如8000或更高。 You should be able to use up to 65535 (higher depending on the browser's implementation). 您应该最多可以使用65535 （具体取决于浏览器的实现）。

It's worth noting that you should have a plan for z indexes of fixed/absolutely positioned items. 值得注意的是，您应该为固定/绝对定位项目的z索引制定计划。