已解决: (http://jsfiddle.net/336e6pbh/15/) (解决方案).
我有这个简单的js代码:jsfiddle(jsFiddle链接)。
Desktop();
GalleryButton();
function Desktop() {
var wrapper = document.getElementById("wrapper");
var footer = document.createElement("footer");
var content = document.createElement("div");
wrapper.appendChild(content);
content.appendChild(footer);
footer.id = "mainFooter";
content.id = "content";
}
function GalleryButton() {
var galleryImg = document.createElement("img");
var galleryButton = document.createElement("a");
galleryButton.setAttribute("href", "#");
galleryImg.setAttribute("src", "pics/gallery.png");
var bottom = document.getElementById("mainFooter");
galleryButton.appendChild(galleryImg);
bottom.appendChild(galleryButton);
galleryButton.onclick = function () {
new NewBox();
};
}
function NewWindow() {
var popup = document.createElement("div");
var content = document.getElementById("content");
popup.id = "popup";
content.appendChild(popup);
}
function NewBox() {
new NewWindow();
var box = document.createElement("div");
var content = document.getElementById("popup");
box.id = "box";
popup.appendChild(box);
}
当我单击左上角的 img 时,会出现一个新的弹出窗口,里面有一个黄色框。我的问题是如何在新弹出窗口中获得带有新黄色框的新弹出窗口?
我可以将代码从 NewWindow 放到 NewBox 函数,但我希望这些函数分开。
你对document.getElementById("popup")的第二次调用是找到第一个带有id=popup的div,并将黄色框放在那里。
您的元素 ID 应该是唯一的:HTML 规范
检查这个jsfiddle,我已经更改了您的代码和CSS
http://jsfiddle.net/336e6pbh/5/
function GalleryButton() {
var galleryImg = document.createElement("img");
var galleryButton = document.createElement("a");
galleryButton.setAttribute("href", "#");
galleryImg.setAttribute("src", "pics/gallery.png");
var bottom = document.getElementById("mainFooter");
galleryButton.appendChild(galleryImg);
bottom.appendChild(galleryButton);
galleryButton.onclick = function () {
new newPopUp();
};
}
function newPopUp(){
var content = document.getElementById("content");
var popup = document.createElement("div");
popup.className = "popup";
var blueBox = document.createElement("div");
blueBox.className = "blueBox";
popup.appendChild(blueBox);
content.appendChild(popup);
}
你的CSS会是这样的
#content {
background-color: #ccc;
height:300px;
width:350px;
}
#mainFooter {
border:1px solid #000;
height:50px;
background-color: rgba(0, 0, 0, 0.4);
}
.popup {
background-color: blue;
border:1px solid pink;
height:100px;
width:150px;
}
.blueBox {
background-color: yellow;
height:20px;
width:40px;
}
您的 HTML 代码将保持原样。