0

我尝试制作自己的灯箱。我使用 adiv覆盖网页并在其中显示div图像、按钮等。

这个 div 有一个半透明的背景图像来“暗淡”一切。

问题是三件事不能被忽视。（它们与图像重叠）

-Openlayers 地图（在 html5 中article）

-一个html5video标签

-一个html5details标签

这发生在跨浏览器上。

有任何想法吗？与html5有关吗？标签在 DOM 中的位置/顺序还是什么？

提前致谢

编辑

这是代码。希望能帮助到你。来自 2200 行文件，因此对其进行了编辑。询问我是否需要更多规格

 <script type='text/javascript'>
//create image element to later append to lightbox div
var elem2 = document.createElement("img");

//open layers - set map...
map = new OpenLayers.Map('map_element', options);
//more openlayers things here

//image takes its source from an array came form a query
elem2.src=mpli[0];

//then, append to the light box div
document.getElementById("lightbox").appendChild(elem2); 

//functions for hide/show the lightbox div
function lightboxme(){
        document.getElementById("lightbox").style.display="block";

    }

    function unlightboxme(){
        document.getElementById("lightbox").style.display="none";
    }

</script>


//map's article
<article id='map_element' style='width: 900px; height: 400px;'>
</article>


//the small div that contains the image gallery - when clicked , shows the lightbox
 <div id="smallbox" onClick="lightboxme();" ></div>

//the lightbox's div
 <div id="lightbox"    style="display:none ;"  >

//lightbox's css
        #lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(semi-transparent.gif) repeat;
    text-align:center;

}
4

0 回答 0