Question

这是链接https://jsfiddle.net/frempong69/8z2y0gw1

    //create di and assign id of overlay
    var over = document.createElement("div");
    over.setAttribute("id", "overlay");

    //create image
    var image = document.createElement("img");

    //create body
    var body = document.getElementsByTagName("body")[0];

    //append image to over

    over.appendChild(image);

    //append over to body
    body.appendChild(over);


    //when clicked on a, prevent default
    //get a elements
    var gallery = document.getElementById("imageGallery");

    //a elements
    var imgs = gallery.getElementsByTagName("a");
    //looping through all images
    var len = imgs.length;

    for( i = 0; i < len; i++){
    //add event of click to imgs
    var singleimg = imgs[i];
    singleimg.addEventListener("click", clicca, false);
      }

    function clicca(event){
    event.preventDefault();
    //get href of a pressed
    var href = this.getAttribute("href");
    //set attribute of image to href
    image.setAttribute("src", href);
    image.setAttribute("width", "400px");
    image.setAttribute("height", "300px");
    //show over (by adding class)
    console.log(image);
   over.classList.add("open");
   //append over to body
   body.appendChild(over);

 }

Answer 1

有几个问题：

1 - 您需要在clicca的点击事件中添加功能image tags之前添加#overlay.open：

2 - 您需要更改css以适合div：例如#overlay.open

您需要对#overlay进行此更改，因为.open 已经具有您在使用#overlay { background:rgba(0,0,0,0.7); width:100%; height:100%; position:absolute; transform: translateX(9999px); top:0; left:0; text-align:center; } .open{ transform: translateX(0px); top: 0; left: 0; height: 100%; width: 100%; }时要更改的所有属性。

查看：

.open

在css中，风格的偏好如下：

id>class>tags

在这种情况下，当您添加类div时，#overlay中的任何样式都不会更改。因为所有.open都包含.open以上的所有首选项。

您有2个选项：

强制班级!important使用 .open{ transform: translateX(0px)!important; top: 0!important; left: 0!important; height: 100%!important; width: 100%!important; } 添加样式，如：

#overlay

或

让你的风格更强更好然后#overlay.open。
添加#overlay.open，现在css引擎将处理#overlay超过{{1}}。

检查这个新版本：https://jsfiddle.net/8z2y0gw1/1/

Answer 2

将CSS中的.open更改为#overlay.open。

Javascript叠加：为什么单击图像时叠加层不显示？

2 个答案: